<Textfield multiline /> value doesn't show up

[x-fusion]

Value that is loaded whilst being in different doesn't show until activation of field (like clicking)

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In 3 different I have some form elements. During loading first is active and it's values are loaded, showed as suppose to. Other two tabs (which are not active) get their values (all of those tabs share same object for initial values display), fields get populated, except for fields (they actually have those values, but doesn't show until clicked)

Expected Behavior 🤔

should display text in input same as

Steps to Reproduce 🕹

Steps:

1. Created from which is divided in some parts and displayed in tabs
2. Create redux-thunk reducer to fake READ operation from API
3. useEffect(() => onGetClaim(id), [onGetClaim()]) in parent component (Your tab control component)
4. <TabPanel tabIndex={tabValue} value={0}> <InitialClaimForm currentClaim={currentClaim}/> </TabPanel> <TabPanel tabIndex={tabValue} value={1}> <ProductDescriptionForm currentClaim={currentClaim}/> </TabPanel> <TabPanel tabIndex={tabValue} value={2}> <SuggestedActionsForm currentClaim={currentClaim}/> </TabPanel>
   Pass loaded data to components and switch active tabs. items won't show value until clicked

I would gladly provide source code, because I couldn't manage to port code to codesandox and it's hard to pin down where exactly problem is

Context 🔦

I am trying to create Edit form which is split into 3 parts by using Tabs,Tab,TabPanel(custom div) components. I load data from redux using action creator in parent component of that form.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	16.13.1
Browser	Firefox Developer Edition, Chrome
TypeScript
etc.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[jakubbloksa]

I think I have the same problem. I have TextField multiline, I load data from api... And via Inspect I can see that it is loaded inside textarea, but the height computed by the component is set on height="0px", until you click the TextField, then it resizes correctly and sets the height.
I tried to add autoFocus for example, but it did not work either.

[oliviertassinari]

@jakubbloksa Make sure the component is not display: none when it first render. Otherwise, force a rerender to sync the height.

[jakubbloksa]

@oliviertassinari
I assume problem is on my side, but I can't figure out what could be wrong.
Edit: It does the similar problem even with no data - only with placeholder

It looks like this when it first render:

This is when I click on it with data:

This is when I click on it with only placeholder:

What do you mean by component set to display: none, I don't hide it or anything. It should render on data changes, which seems to work correctly, because the value is in the field. Or do you mean the "hidden" textarea which computes height for the other one?

// This is input class
    input: {
        border: `1px solid ${COLORS.greyLighter}`,
        borderRadius: 5,
        padding: "16px 20px",
        "&:hover": {
            borderColor: theme.palette.text.primary
        },
        "&.Mui-focused": {
            borderColor: theme.palette.primary.main
        },
    },

// This is usage of the TextField
<TextField
    multiline
    fullWidth
    placeholder="Short info about you..."
    autoComplete='off'
    value={about}
    aria-label="Write info about you"
    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => handleChangeAbout(e)}
    onBlur={() => handleBlurAbout()}
    rowsMax={8}
    InputProps={{
        classes: { root: classes.input },
        disableUnderline: true,
    }}
    inputProps={{ maxLength: 500 }}
/>

This is generated html from Inspect, you can see computed height: 0px, weird thing can be probably width: 100% inside the "hidden" textarea - this changes for px size based on the length of the text after clicking on the TextField

<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth" aria-label="Write info about you">
  <div class="MuiInputBase-root MuiInput-root makeStyles-input-10 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-multiline MuiInput-multiline">
    <textarea rows="1" aria-invalid="false" autocomplete="off" placeholder="Short info about you..." maxlength="500" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline" style="height: 0px; overflow: hidden;">Hi I am a tester account and this is for testing purposes. So allalgfsklaglgsjalgjgsaosgjnosgngasosganoasgnsgonasg
    </textarea>
    <textarea aria-hidden="true" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline" readonly="" tabindex="-1" style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0px); width: 100%;">
    </textarea>
  </div>
</div>

[oliviertassinari]

@jakubbloksa If you provide a minimal live reproduction with Material-UI v5, then we could have a look.

[jakubbloksa]

@oliviertassinari I just figured it out. I am using Suspense with lazy loaded components in React and this made it behave like that, I will remove it for these modules. Thanks for your time though.

[oliviertassinari]

@jakubbloksa Interesting makes me think of facebook/react#14536.

[jakubbloksa]

@oliviertassinari Oh, I didn't know they mount with display: none, seems like that is the problem. I will try some work-arounds. Thanks for the help, good catch!

[gaearon]

You can check whether it works with React 18 alpha.
https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

I expect it may be fixed there (same as #14077 (comment)).

[embeddedt]

I'm using the following as a workaround with my React 17 project for now:

textarea.MuiInputBase-inputMultiline {
    min-height: 20px;
}

This is definitely not ideal but at least keeps the first line visible (better than just seeing nothing and wondering where the box is). Most of my multi-line textfields only have one line in them anyway.

[oliviertassinari]

@embeddedt Do you have a reproduction of the issue? I suspect that #27840 fixes it.

[embeddedt]

Do you have a reproduction of the issue?

Right now I can reproduce it 100% of the time in my private project, however, I don't have a simplified reproduction case.

I assume that #27840 is not going to be backported to v4, right? My understanding of v5 is that IE11 support is essentially "as-is", and could break at any point during the release cycle. Consistent IE11 support is unfortunately necessary for the time being (not my decision).