bug: keyboard overlapping input fields

[Andr9651]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

The keyboard overlaps input fields in certain scenarios on Android and always on iOS. My main issue in my own project is a footer that hides the input field on iOS, but I've tested both with and without a footer here, which both seem to cause issues.

https://github.com/user-attachments/assets/cf57ba60-8cbe-4c01-b5c1-a780976c5318

https://github.com/user-attachments/assets/4503a8bc-2aba-4e00-b1ad-c280c4828dda

Expected Behavior

I expect that Android and iOS behave in the same way.

I expect the input-field to be visible when I close the keyboard as well.

Steps to Reproduce

1. Go on tab 2 or 3
2. Tap input-field
3. Check if input-field is visible
4. Close keyboard
5. Check if input-field is visible

Code Reproduction URL

https://stackblitz.com/edit/ionic-input-overlap?terminal=dev

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\lib\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.0 (C:\Users---\Desktop\test\ionic-input-test\node_modules@ionic\cli) Ionic Framework : @ionic/vue 8.2.7

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : 6.1.2 @capacitor/core : 6.1.2 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.15.1 (C:\Program Files\nodejs\node.exe) npm : 10.7.0 OS : Windows 10

=================================

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.2.7

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : 6.1.2 @capacitor/core : 6.1.2 @capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v18.17.1 (/usr/local/bin/node) npm : 9.6.7 OS : macOS Unknown

Additional Information

No response

[dev-p26]

Same issue on v8.x

It was working fine in the older versions

[dimer47]

I also have the same issue on @ionic/vue 8.3.4. Please Ionic team, help us fix this bug on iOS.

[Andr9651]

I've ended up just manually scrolling the scroll container down as a hacky workaround. It's not pretty but it works and has a limited footprint where it's used.

This is the Vue composable I made for it and it uses VueUse (cuz I'm lazy), and the Capacitor keyboard plugin.

import { Keyboard } from '@capacitor/keyboard';
import type { PluginListenerHandle } from '@capacitor/core';
import type { KeyFilter } from '@vueuse/core';
import { Capacitor } from '@capacitor/core';

interface KeyboardScrollDownOptions{
  /** The length to scroll in pixels */
  scrollLength?: number;
  /** Key that can be used to trigger the scroll on web */
  debugKey?: KeyFilter;
}

export function useKeyboardScrollDown(scrollContainer: MaybeRefOrGetter<HTMLElement | undefined>, options: KeyboardScrollDownOptions = {}) {
  const isWeb = Capacitor.getPlatform() === 'web';

  const { 
    scrollLength = 50,
    debugKey = undefined,
  } = options;

  function scrollDown() {
    const container = toValue(scrollContainer);

    if (container === undefined){
      return;
    }

    const currentHeight = container.scrollTop;
    container.scrollTo(0, currentHeight + scrollLength);
  }

  if (debugKey !== undefined && isWeb === true){
    onKeyStroke(debugKey, scrollDown);
  }

  let listenerHandle: PluginListenerHandle | undefined = undefined;

  onMounted(async () => {
    if (isWeb === false) {
      listenerHandle = await Keyboard.addListener('keyboardDidShow', scrollDown);
    }
  });

  onUnmounted(() => {
    listenerHandle?.remove();
  });
}