Doesn't update if made to change width without re-rendering

[Macil]

Here's a codesandbox demo:

https://codesandbox.io/s/react-textarea-autosize-bug-2hc6yv

If you press the "Toggle sidebar" button, then the textarea gets squished by the expanding sidebar and fails to become taller to account for the further-wrapped text.

A fix would be to use ResizeObserver specifically to track changes to the element's width. ResizeObservers have had support on all popular browsers since 2020.

The window resize listener at

react-textarea-autosize/src/index.tsx

Line 101 in 896596a

useWindowResizeListener(resizeTextarea);

would be unnecessary if a useLayoutEffect call like this was present there instead which set up the ResizeObserver:

React.useLayoutEffect(() => {
  // monitor for changes to width
  if (globalThis.ResizeObserver) {
    let knownWidth = libRef.current.clientWidth;
    const ro = new ResizeObserver((entries) => {
      const newWidth = entries[entries.length-1].contentRect.width;
      if (newWidth !== knownWidth) {
        knownWidth = newWidth;
        resizeTextarea();
      }
    });
    ro.observe(libRef.current);
    return () => {
      ro.disconnect();
    };
  }
}, []);

---

Additionally, even though issue #337 isn't really this library's fault, using a ResizeObserver would work around that issue as it would get triggered as soon as the textarea is inserted into the document.

[shakti97]

@Andarist I am also facing a similar issue; once its width changes, it doesn't adjust the rows accordingly. When can we expect this to be fixed, or would you like me to raise a pull request to address it?

[Andarist]

A PR is always appreciated but I can't promise that I will actually have time to review this. The fact that we don't quite have automated tests here doesn't help 😢

[stephenasuncionDEV]

Ended up forcing rerender on focus, but still need this to be automatic

Another work around:

const [forceUpdate] = useForceUpdate();
// work around for https://github.com/Andarist/react-textarea-autosize/issues/389
  useEffect(() => {
    const _forceRerender = async () => {
      await new Promise((resolve) => setTimeout(resolve, 100));
      forceUpdate();
    };
    _forceRerender();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isMobile]);