Shop DAWG

Mobile Keyboard Viewport Test

testmobilekeyboard

Mobile Keyboard Viewport Test

This page is for testing the mobile keyboard viewport handling functionality.

Test Instructions

  1. Open this page on a mobile device (or use Chrome DevTools mobile emulation with touch simulation)
  2. Click the search button in the header to open the search modal
  3. Tap the search input field to focus it and show the keyboard
  4. Observe the search modal height - it should resize to accommodate the keyboard
  5. Dismiss the keyboard (tap “Done” or outside the input)
  6. Verify the search modal expands back to full height

Expected Behavior

  • When keyboard appears: Search modal height reduces to fit above keyboard
  • When keyboard dismisses: Search modal returns to full viewport height
  • CSS variables should update: --viewport-keyboard-height, --viewport-visual-height
  • No content should be hidden behind the keyboard

Debug Console Commands

Open the browser console and run these commands to check the state:

// Check if keyboard service is initialized
window.keyboardViewportService?.getState()

// Check current keyboard height
window.keyboardViewportService?.getKeyboardHeight()

// Check if keyboard is visible
window.keyboardViewportService?.isKeyboardVisible()

// Check CSS variables
getComputedStyle(document.documentElement).getPropertyValue('--viewport-keyboard-height')
getComputedStyle(document.documentElement).getPropertyValue('--viewport-visual-height')

Test Form

Current Implementation Status

The keyboard viewport handling has been implemented with:

  • ✅ KeyboardViewportService - Singleton service for keyboard detection
  • ✅ ViewportHeightManager - Dynamic height calculations
  • ✅ TypeScript interfaces with strict typing (no any types)
  • ✅ DRY principles applied throughout
  • ✅ CSS custom properties for dynamic heights
  • ✅ VisualViewport API with fallbacks for older browsers

Browser Compatibility

  • iOS Safari: VisualViewport API + iOS-specific handlers
  • Android Chrome: VisualViewport API + Android-specific handlers
  • Desktop browsers: Gracefully ignored (no keyboard to handle)

Known Issues

  • Playwright E2E tests cannot properly simulate mobile keyboard events
  • Manual testing on real devices is required for validation
  • Some Android browsers may have delayed keyboard detection

Last updated: 2025-09-08