react-textarea-autosize
react-textarea-autosize copied to clipboard
Andarist
Blinks in Firefox when rendered on server and then re-rendered on the client.
An example:
<TextareaAutosize rows={5} defaultValue={[...5 lines]}/>
is rendered on the server (using react server-side rendering) and then re-rendered on the client using exactly the same argument.
When it is re-rendered on the client, component recomputes the height differently than when it is done by the Firefox 76.0.1 (looks fine on Chrome), so page jumps on load.
I have made a small online demo here: https://learn-idris.net/textarea-autosize-blink
What might be the solution:
- fix some styles to make initial rendering identical to computed rendering (probably hard)
- add an option to explicitly disable computation of height on initialization; recompute height only on a change
- maybe turn on this option when both
rowsandminRowsspecified
Could you also share the source code of this demo and share more information about your environment? So far I can't see any blinking in any browser, including FireFox.
OK, full example: https://github.com/stepancheg/textarea-autosize-blink
Launch with:
yarn install
yarn dev
Then navigate to http://localhost:3000/textarea-autosize-blink
This is default render of text area:
This is how it is rendered after textarea-autosize re-renders it:
Note space at the bottom of textarea before the rerender.
I'm afraid that this project doesn't start for me correctly:
[S] /textarea-autosize-blink/src/server/textarea_autosize_blink.tsx:10
[S] server_1.renderToString(<html>
[S] ^
[S]
[S] SyntaxError: Unexpected token <
I've tried to reproduce the issue that you have linked to in isolation: https://jsfiddle.net/kqh108yf/ and I still couldn't verify what you are reporting on my machine. After some additional thinking, I've also tested this on Windows (as I'm using OSX on a daily basis) and voila - there it was.
I'm afraid though that there is not much I can do about it here - this issue is very specific. I couldn't even patch passed in rows conditionally after detecting the correct browser+OS combination as that would result in client-rendered output mismatching with the one provided by the server.
SSRing this component correctly is, unfortunately, tricky (if you want to have it handled automatically). I would very much like to improve the story around this but I don't know a better way to do this than what we have now. The recommendation is to use inline height style when SSRing - but, of course, you would have to know what a correct value for that is.
I'm afraid though that there is not much I can do about it here
Well, then my original feature request: make an option (off by default) to do nothing (do not recompute height) until the user presses a key.
It will still jump a little first time the user modifies text, but it won't be as annoying as jump at page open.
Well, I don't quite agree about this being better - the problem has just shifted to another point in time. I refuse to go into that direction out of principle. Sorry if that sounds harsh - I really don't intend to be a jerk, but I just don't believe this being a good solution for this library. If you think otherwise you can always fork or use patch-package to introduce this on your end. I truly believe that it's just impossible to cover for all use cases & opinions and as a library author/maintainer I need to take other factors into account (for example I try to keep this library as small as possible).