Doesn't update if made to change width without re-rendering
Macil opened this issue · comments
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
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.
@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?
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 😢