ReactJS, input and textarea in forms. In mobile version, keyboard covers input fields

I encountered the following issue in the mobile version of my website built with ReactJS (specifically in the Telegram Mini App). When focusing on an input or textarea field, the appearing keyboard covers the screen. I tried to solve the problem by attaching an onFocus event to the input/textarea with the following code

const handleAppearanceKeyboard = (ref) => {

        setIsInputFocused(true)
        setTimeout(() => {
          if(ref.current) {
            ref.current.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
          }
        }, 150);
      };

, where I used a ref with useRef() for the input field. However, on Android devices, this works incorrect, and on iPhones, it starts to jitter when scrolling.

How can I create a working solution so that the keyboard always appears below the input and doesn’t overlap it when focused? For example, like it is shown here: https://lichess.org/signup.

You need to sign in to view this answers