React hooks for getting the document height that updates when the On Screen Keyboard/Virtual Keyboard toggles

useDocumentHeight.ts

The latest version is available at https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk

useOnScreenKeyboardScrollFix.ts

import { useEffect } from 'react'

const useOnScreenKeyboardScrollFix = () => {
  useEffect(() => {
    const handleScroll = () => {
      window.scrollTo(0, 0)
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])
}

export default useOnScreenKeyboardScrollFix

You might need a few timeouts like I did in the useViewportSize hook, but that will be kind of ugly for the user. Luckily it will only be ugly for the crazy browsers.

      // Closing the OSK in iOS does not immediately update the visual viewport
      // size :<
      setTimeout(updateViewportSize, 1000)

One nice thing is that since you're setting scroll position to 0 every time, you can fairly easily start multiple timeouts without the user noticing.

It seems to work if I adjust the maxHeight instead of the height and it has a h-full class from tailwind ( which is just height:100% )

import { ElementType, HTMLAttributes } from "react";
import useViewportSize from "@/hooks/useViewportSize";
import useOnScreenKeyboardScrollFix from "@/hooks/useOnScreenKeyboardScrollFix";
import usePreventOverScrolling from "@/hooks/usePreventOverScrolling";
import useIsOnScreenKeyboardOpen from "@/hooks/useOnScreenKeyboardOpen";

interface Props extends HTMLAttributes<HTMLDivElement> {
  element?: ElementType;
}

export function FullViewportContainer({
  element: Element = "div",
  ...others
}: Props) {
  useOnScreenKeyboardScrollFix();
  const [, viewportHeight] = useViewportSize()  ?? [];
  const ref = usePreventOverScrolling();
  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
  return (
    <Element
      {...others}
      ref={ref}
      className="w-full h-full"
      style={{
        maxHeight: viewportHeight,
        padding: isOnScreenKeyboardOpen
          ? "env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)"
          : "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)",
        transition: "padding 100ms, height 100ms",
      }}
    />
  );
}

Aaaand it must be the direct children of the root it seems

Little tricky. Sucks that mobile-PWA development is so harsh sometimes. But this solution works like a charm. Love it. Many thanks!

when i use useOnScreenKeyboardScrollFix, the scroll content in FullViewportContainer will stop scroll, so i can not scroll into view on focusin

how can i get keyboard height

Hi @MartijnHols, First of all, thank you so much for your work!!! I have the same issue on my app and I implemented your solution and it works but most of the time when the keyboard is open and the screen resizes + the scroll to top emitting, there is a glitch that the app slides from the bottom to the top... Here is an example, first focus has the glitch and the second don't:

Screen.Recording.2024-06-23.at.12.45.24.mov

same problem here. did you end up getting a fix?