Cannot stop keyboard from overlapping ion-searchbar input

Ionic Framework Ionic Vue
1

Sorry if this question has been asked a million times. I’m using Ionic 7. An ion-search input box towards bottom of my page is always obscured by the soft keyboard on iOS when I give it focus. And often the submit button is obscured on other fields and won’t pull up. I have tried all the solutions I could find and can’t get anything to work. Is there an official solution for avoiding this problem?

The ion-searchbar component is inside ion-item inside an ion-item-group. I’ve tried:

  1. Replacing ion-searchbar with ion-input
  2. Tried scrolling on focus, but can’t figure out for to make that work
  3. Adding lots of blank lines under my form input

Overall I am bummed for this 2nd class keyboard experience and wondering if there is a way for the app to have a first class experience, ie where the screen is pushed up by the keyboard, not overlaid.

I tried configuring the Capacitor Keyboard plugin to push the content up, which I assumed was the default behavior. Here is someone complaining about the behavior I actually want: javascript - keyboard pushes content upwards with ionic - Stack Overflow

But I don’t get that default push-up behavior, I get overlay. I am confused.

2

Ionic has a special scroll assist utility that ensures ion-input and ion-textarea elements are not covered by the keyboard. We do not include ion-searchbar because that component is typically used at the top of the view outside of the scrollable content and is not covered by the keyboard as a result.

If you are unable to move the searchbar to the top of the view, my recommendation would be to listen for the Keyboard plugin’s lifecycle events and then apply a transform on the searchbar equal to the height of the keyboard:

const input = document.querySelector('ion-searchbar');

window.addEventListener('keyboardWillShow', (ev) => {
  const { keyboardHeight } = ev.detail;

  input.style.setProperty(
    'transform',
    `translate3d(0, ${keyboardHeight}px, 0)`
  );
});

window.addEventListener('keyboardDidHide', () => {
  input.style.removeProperty('transform');
});
1 Like
3

Thank you—I see so my problems begin by using the ion-searchbar at the bottom. I actually use it in three places stacked on top! The reason is that I have three input fields that need work as autocomplete lookup fields with a search left-embedded icon. Ok but let me trying giving that up for normal ion-input fields.

4

If that does not work then a video/screenshot of the issue might help me give better recommendations.

5

Works! Thank you very much.

1 Like