MinRows on Firefox with Border-box
MonstraG opened this issue · comments
Example 3 on https://andarist.github.io/react-textarea-autosize/
It looks fine on Chrome, broken on Firefox 86
I've console.log'd onHeightChange, and on my page ff reports rowHeight of 7 and Chrome - 17, the issue lies in calculation of rowHeight it seems.
PRs, especially for bug fixes, are very welcome here. It would also have to come with a proper explanation as to why the bug happens here in the first place.
It seems like, on Firefox 87, size calculation is broken wholesale. It appears to be due to a Firefox bug, as it works in Firefox Nightly as of 2021-03-26.
It looks like Firefox is under-reporting the value of scrollHeight here, giving the same value for one line of text as zero lines, leading it to calculate that rowHeight is 0, at least on my machine. Strange that @MonstraG and I are seeing different results. Since it's to do with scroll padding, this bug may have fixed it? https://bugzilla.mozilla.org/show_bug.cgi?id=1696885
I got also an issue with maxRows. It works in firefox beta 89, so nothing the library can do I think...
Firefox 89 started shipping today, fixing this.
That's great to hear!
Seeing this issue with latest Firefox on macos, and we aren't setting the max, but the height on initial render is as if there is only one line: height: 20px instead of the 70px that it should be.
I think #313 (comment) is correct that it has to do with calculation for row height.
The interesting bit, is that you can't reproduce it if you have devtools breakpoints active. It has something to do with timing in FF I believe. getHeight returns 0 in this case, meaning the scrollHeight of the element isn't reflecting the value in the element. So it is a Firefox bug, and it isn't fixed yet it seems. The linked issue seems unrelated.
Here's a reproduction https://codepen.io/tgknownasilya/pen/wvjboOo
Bug submitted: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904