Handling keyboard in a non-Ionic app

[vojto]

Hey there,

We are developing an iPad app that primarily wraps our web app. Notably, we are not using Ionic for this project. I'm looking for feedback on our approach to handling the keyboard appearance, particularly focusing on scrolling and resizing when the keyboard is visible or hidden.

Initial situation

By default, wrapping a website in a Capacitor app results in a page-like behavior, as shown in this example (https://share.cleanshot.com/Ss21Wklg). The entire content can be scrolled, which doesn't resemble a typical app experience.

Integrating @capacitor/keyboard

We can fix this issue by adding the Keyboard plugin. Simply integrating this plugin disables the system scrolling and fixes the content in place.

Issues with native resizing mode

I experimented with the native resizing mode, but it didn't provide the desired results. Dismissing the keyboard left a large white gap. Should I have given this option more consideration?

Using body as the Resizing Mode

In our iOS app, we utilize ionic resizing, but our current app doesn't rely on Ionic. To address this, I created a custom component called CapacitorScreen to serve as an alternative to IonicApp.

Unfortunately, the native side of @capacitor/keyboard doesn't provide a setting for resizing custom elements – only body or ionic options are available.

To work around this limitation, we observed changes to the body element's style. Here's a snippet of our implementation:

const CapacitorScreen = () => {
  const divRef = useRef(null)

  useEffect(() => {
    const observer = new MutationObserver(() => {
      divRef.current?.style.setProperty('height', body.style.height || '100vh')
    })

    observer.observe(document.body, {attributes: true, attributeFilter: ['style']})
  }, [])

  return (
    <div className="fixed top-0 right-0 left-0" ref={divRef}>
      {/* ... */}
    </div>
  )
}

Other approaches considered:

• Ensuring all child elements within body use height: 100%. However, this would require more extensive rewriting of our app.
• Monitoring changes to body.style but using the Visual Viewport API (https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) instead. My concern was that it might not perfectly match the keyboard state, although I didn't test this option.
• Forking @capacitor/keyboard and adding a custom-element resizing mode. Would the Capacitor team welcome such a contribution?

Scrolling to focused input

To address this, we introduced CapacitorContainer and CapacitorInput components as alternatives to IonContent and IonInput.

The container component looks like this:

<div className='overflow-y-auto'>
  {children}

  {keyboardVisible && (
    <div style={{height: keyboardHeight}} />
  )}
</div>

The spacer is added just before the keyboard becomes visible, allowing us to start scrolling to the element immediately after focusing on the input.

When a user focuses on an input, the CapacitorInput component calculates whether scrolling is necessary. If so, it requests the container to scroll to the element via React Context.

Main question

Considering that we're not using Ionic in our app and that we require resizing when the keyboard is shown or hidden, as well as scrolling to focused inputs, does our solution seem like the simplest way to address our problem?