Custom On-Screen Keyboard & Touch-Handling Migration

Built a custom on-screen keyboard to replace the unreliable Android native keyboard in the tablet WebView, then unified touch handling across the tablet UI by migrating to a single base-button primitive using pointer events.

The Android native keyboard on the production tablets was unreliable inside the WebView — failing to appear, overlapping UI elements, or dismissing unexpectedly during program editing. Built a complete custom on-screen keyboard in Vue: intercepts focus events on input fields, suppresses the native keyboard, and renders a styled keyboard overlay. Includes guards for connection cold-start and modal display, and supports two-way binding so existing form components work without modification.

Implemented scroll management — when the keyboard appears, it finds the nearest scrollable parent, calculates the visible area, and pushes content into view so inputs near the bottom of the screen aren't hidden behind the keyboard. Built a separate Composition-API version for the modernized welding UI with the same feature set.

Discovered that many components were relying on a touch directive that failed silently on many Android devices. Created a base-button component using pointer events and migrated touch-handling call sites across the tablet UI — unifying a previously inconsistent touch-handling story onto a single primitive.