Andarist / Andarist/react-textarea-autosize

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

Offen
#389 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
2.4k
Forks
247
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.