Andarist / Andarist/react-textarea-autosize
Doesn't update if made to change width without re-rendering
- Lingua principale
- TypeScript
- Stelle
- 2.4k
- Fork
- 247
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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](https://caniuse.com/resizeobserver) since 2020.
The window resize listener at https://github.com/Andarist/react-textarea-autosize/blob/896596a5a9ab02d566f528442758a43633843481/src/index.tsx#L101 would be unnecessary if a `useLayoutEffect` call like this was present there instead which set up the ResizeObserver:
```js
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 https://github.com/Andarist/react-textarea-autosize/issues/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.
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Valutazione
Questa issue non è ancora stata valutata.