search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.96k stars 32.27k forks source link

TextareaAutosize height inconsistent for certain fonts #20574

Closed benwiley4000 closed 4 years ago

benwiley4000 commented 4 years ago

Current Behavior 😯

Certain fonts, specifically those which take up more vertical space than the expected line-height, will cause the autosized height of a TextareaAutosize to be a bit taller. This is ok, but the property used to compute the height, scrollHeight, turns out to be inconsistent depending on whether the last row of text input is empty or not. When the last row is empty, the last row takes up the standard line-height, and if the last row is non-empty, then it assumes the height of the chosen font.

Note that the only font-family that ships in browsers and will yield this behavior is cursive, as far as I know. However the issue also comes up with some third-party fonts seen in the wild.

Demo of issue (for rows > 3)

Bug

Expected Behavior 🤔

The height should be measured as though the last line contains text, and therefore be consistent.

Steps to Reproduce 🕹

Steps:

  1. Render a multiline input
  2. Make sure its textarea instances (shown and hidden) render using an extra-tall font (try cursive)
  3. Enter more lines of text than the rowsMin and observe the difference when adding new empty rows and then adding content to the last row

Or, just check out this Codesandbox: https://codesandbox.io/s/musing-mendeleev-uh3u2

Context 🔦

It's just annoying for text to be moving around while you're typing.

Your Environment 🌎

Tech Version
Material-UI v4.9.9
React v16.12.0
Browser Chrome 79, Firefox 74
TypeScript N/A
etc.
benwiley4000 commented 4 years ago

There is a related issue which I didn't open a thread for, which is that if the oversized third-party font is loaded asynchronously after the initial React paint, there will be a one-time, permanent height increase in the multiline input the first time it is focused or otherwise re-rendered. This height change turns out to be desirable, so the best solution I could come up with is to make sure that all my font assets are preloaded by the HTML head, so they're available during the first paint. After implementing that change, the only remaining issue was this last-row-height inconsistency.

multiline-re-autosize

oliviertassinari commented 4 years ago

@benwiley4000 Exciting to see the font customization being stress-tested :).