capacitor icon indicating copy to clipboard operation
capacitor copied to clipboard

Fix/android 15 keyboard overlap

Open ish1416 opened this issue 1 month ago • 0 comments

Description

Fixes keyboard overlap issue on Android 15+ devices where input fields at the bottom of the screen are completely covered by the keyboard when focused, even with edge-to-edge configuration enabled.

Closes #8166

Problem

On Android 15+ devices (API 34+), the keyboard overlaps bottom input fields when:

  • adjustMarginsForEdgeToEdge: 'force' is set
  • captureInput: true is configured
  • Keyboard.resizeOnFullScreen: false is used
  • Edge-to-edge enforcement is active

This occurs because Android 15's edge-to-edge changes how IME insets are handled, causing the WebView to not properly adjust for keyboard visibility.

Solution

Enhanced CapacitorWebView.edgeToEdgeHandler() with:

  1. Android 15+ detection (API 34+) for specialized keyboard handling
  2. Smart IME inset management - uses padding instead of margins for keyboard space
  3. Auto-scroll to focused inputs - JavaScript-based detection and scrolling when keyboard appears
  4. Proper inset return values - lets system handle IME insets on Android 15+
  5. Backward compatibility - maintains existing behavior for older Android versions

Testing

  • ✅ Tested on Samsung Galaxy S24 Ultra (Android 15, One UI)
  • ✅ Bottom input fields remain visible when keyboard opens
  • ✅ Auto-scroll works for inputs covered by keyboard
  • ✅ Compatible with existing keyboard configurations
  • ✅ No regression on older Android versions

Configuration

Works with standard Capacitor keyboard configuration:

android: {
  captureInput: true,
  adjustMarginsForEdgeToEdge: 'force'
},
plugins: {
  Keyboard: {
    resizeOnFullScreen: false
  }
}

ish1416 avatar Nov 08 '25 06:11 ish1416