Generalized solution to keyboard show / hide

I’m wondering if anyone else using turbo-ios has come up with a generalized / works in most cases way they deal with the keyboard covering the web view.

Picture a fullscreen view with a centered input text box and a bottom 10px from the bottom on the screen. When you focus the input and the keyboard is displayed the button will be covered.

I see in Hey! the Save button is at the top of the screen (on edit profile) and I’m wondering is that is (part of) the reason?

Thanks

We don’t generally do anything in HEY or Basecamp to avoid that. Unfortunately it’s always a pain dealing with the keyboard on mobile. But it is one reason we typically do hide form submission buttons that are present in the web view and display them natively. It matches the platform expectations, as well as solving that issue of not being able to find the button hidden by the keyboard.

1 Like

Thanks, that’s kinda what I was thinking. Do your native buttons trigger form submission using some sort of javascript postMessage?

Yup, that’s the general idea. We have a small library called Strada we use for helping with this thing that we’ll hopefully open-sourcing in the next few months. The short version is the library uses Stimulus know when an element (like a form submission button) is connected to the DOM. That button is hidden with CSS, and Strada then sends a message to the native app with the the type of button to display, and the native app renders that in a way that makes sense for the platform. When tapping the button, it sends a message back to the web view through Strada to “click” the button, so it’s as if the user had tapped that button directly.

2 Likes

Thanks that’s very helpful. I think I would probably keep asking you 100 more questions about the details but I don’t want to exhaust your good will. I’ll look forward to digging into the code when you all are ready to release it.