Andarist / Andarist/react-textarea-autosize

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

Aperta
#389 3 commenti 1 reazione 0 assegnatari Vedi su GitHub
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.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.