Preventing keyboard from covering input field on iOS


#1

Hi, I will first start by saying I am pretty unfamiliar with trigger.io and am currently trying to maintain a project that someone else entirely built/created who i no longer work with.

What I do know is that prior to the other developers departure the project was updated to use the v2.7.6 trigger config to attempt to fix some iphone x layout issues.

It is a chat app and we have noticed in the latest development build an issue where when the keyboard pops up in iOS it is covering the chat input field instead of pushing it up.

i.e.

expected iOS (taken from latest public release):

kb1

android looks good too as an example:

but this is what it looks like in iOS in latest development build:

kb2

The problem is lots of changes have happened including the trigger config update, and I am completely lost if this is something that should be fixed through trigger config update, javascript, html layout, etc. One thing I have attempted to try to do is have an onFocus event for the text input and measure the device keyboard size and adjust the bottom padding of the text input. I think this would be fine but im not sure how to access that measurement, and I saw someone suggest this in another forum thread https://github.com/sloops77/ionic-keyboard-forge. After trying to add that module to the project though it was having an error related to the android inspector.

Is there any suggestions for how this problem in general should be handled with trigger, any more info. that would be helpful to assist? Appreciate any help


#2

actually i found this documentation to listen to keyboard events and get the size. this might be what i need to help with this? https://trigger.io/docs/current/api/core/event.html (keyboardWillShow)


#3

There are a lot of variables around this :slight_smile:

I’m probably not the right person to ask for HTML/JS/CSS related causes, hopefully someone else can chime in.

From the Forge runtime side:

  1. Are you using UIWebView or WKWebView? UIWebView is no longer supported and we recommend all projects switch to WKWebView.

  2. If you absolutely must use UIWebView, try setting the following flags in the top-level of your src/config.json:

...
"flags": {
    "ios_workaround_uiwebview_keyboard_bug_on_ios12": true,
    "ios_force_update_uiwebview_safe_area_inset_variables_for_css": true
},
...

If this doesn’t help and you can’t find a HTML/CSS/JS solution then it’s probably time to explore the keyboardDidShow and keyboardWillShow event listeners.


#4

Hi I ended up just going the route of using the keyboard event listeners and seems to fix my particular use case.

I will look into your suggestion of making sure to migrate to WKWebView in the future.