suid

suid copied to clipboard

In my app I create components outside of the DOM sometimes, only inserting them into the DOM when necessary. This seems to collide with the logic behind <Textfield multiline/>. More specifically, the textfield's height is way too small, and then jumps to the desired height.

Here is a minimal demo: https://stackblitz.com/edit/tz3p3n?file=src%2FApp.tsx

I believe this code has something to do with it:

if (computedStyle.width === "0px") {
  return;
}

If the element is not inserted into the DOM yet, it appears that all attributes of computedStyle are empty strings. Changing the code to the following helps a bit:

if (computedStyle.width === "0px" || computedStyle.width === "") {
  return;
}

But now the textfield seems to jump from slightly more than the desired height to the actual desired height, still giving a jarring user experience.

(As a workaround, I'm currently using InputProps={{style: "min-height: 1234px"}} where 1234px is the height of the element after it "jumped" and has the correct height. Of course, this is rather brittle.)