The input field and most recent statement overlap with the keyboard.

In chat apps where the input field and most recent statement are at the bottom of the screen, the iOS virtual keyboard was causing an inconvenience.

solution

The basic policy is window.scrollTo
Network response increases logging.
- Content updates asynchronously and changes height at unpredictable times
- React.useEffect is called after rendering the component, use this
  - const [logs, setLogs] = useState(...)
  - SetLogs in response to trigger redrawing
- useEffect(scrollToBottom, [logs]) to scroll after rendering
- Now this pathway is resolved.
Text area changes size depending on the amount of text inside.
- TextareaAutosize in Material-UI
- Scrolling with onChange didn’t work.
  - Because the rendering is not yet finished at this time.
  - TextareaAutosize
    - Check the height when changing content and setState if it needs to be updated.
    - The rendering of the component runs when this change is triggered.
  - I couldn’t figure out how to do hooks after rendering child components.
    - setTimeout(scrollToBottom); do
    - There may be no guarantee that this will be after the rendering.
Contents of scrollToBottom ts

const scrollToBottom = () => {
  const e = document.getElementById("bottom") as HTMLElement;
  const y = e.offsetTop - document.documentElement.clientHeight + 300;
  if (y > 0) {
    window.scrollTo(0, y);
  }
};

- 300 is the height of the virtual keyboard. Could not figure out how to get it from the device.
    - According to the reference material (*1), it was 301, and the experiment with 11ProMax at hand seemed to be OK, so this is what we did.
- BOTTOM has hr under the input field.

diff
Related Focus is lost after text entry. reference data

https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js pKeicho

When retrieving with window.innerHeight, the value that can be obtained is different when the address bar is displayed by scrolling up and when the address bar is not displayed by scrolling down. When retrieving with document.documentElement.clientHeight, there is no effect by the address bar and a constant value can always be obtained.

virtual keyboard

This page is auto-translated from /nishio/入力欄と直近発言がキーボードとかぶる using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. I’m very happy to spread my thought to non-Japanese readers.

🪴 Quartz 4.0

The input field and most recent statement overlap with the keyboard.

Graph View

Backlinks