Initial height is incorrect in Firefox

[noahtallen]

I'm working on migrating to this package from react-textarea-autosize (because it isn't maintained anymore and doesn't support React 18) in a large project (WordPress/gutenberg#48215)

I've come across a bug where the initial height is sometimes calculated incorrectly. This bug only happens in Firefox, not Chrome or Safari.

We have a large editor which has a WYSIWYG mode, and a plain-text/HTML mode. Typically, you edit in the visual editor, but may need to switch to the "code" editor for some things. This code editor uses the autosize textarea. I've found that if the editor uses the autosize textarea on first page load, it is the correct size. However, if we switch to the textarea after the first page load, it doesn't calculate the height properly (and just uses min rows/min height).

After interacting with the textarea, or even resizing the page, it adjusts to the correct size.

Untitled.mp4

[yongjoo-choi]

me too

[Andarist]

I can't afford to investigate this on my own - unless that work would get sponsored. I'm always happy to review PRs though so if you manage to fix it you can count on me to review your work.

[noahtallen]

Fair enough! I'll test once the other fix is on npm.

[mgabor3141]

@Andarist I believe I may have found the cause of this, or at least the cause of a similar issue that I was experiencing.

In my case sizingStyle contains width: '0px' on this line for the first render. This gets applied as a direct style to the hidden textarea, which (I assume) reacts to this by putting each character on a new line. This results in a massively increased node.scrollHeight.

I solved this by adding width: 'auto' to the HIDDEN_TEXTAREA_STYLE, which gets reapplied again on a subsequent line. This resets the erroneous width and the height calculation is once again correct.

I created #371 with this change.

User agent where I experienced this: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.5615.87 Electron/24.1.2 Safari/537.36

[zezhou]

@Andarist I believe I may have found the cause of this, or at least the cause of a similar issue that I was experiencing.

In my case sizingStyle contains width: '0px' on this line for the first render. This gets applied as a direct style to the hidden textarea, which (I assume) reacts to this by putting each character on a new line. This results in a massively increased node.scrollHeight.

I solved this by adding width: 'auto' to the HIDDEN_TEXTAREA_STYLE, which gets reapplied again on a subsequent line. This resets the erroneous width and the height calculation is once again correct.

I created #371 with this change.

User agent where I experienced this: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.5615.87 Electron/24.1.2 Safari/537.36

I have tried your solution and it works! Thank you!