Search code examples
reactjsmaterial-uilabeltextfield

React mui TextField label is cut off in Autocomplete

I am currently facing difficulties with React MUI's Autocomplete component. The Autocomplete is placed in a FormControl component.

In the renderInput prop of the Autocomplete, I added a TextField, but its label is being cut:

enter image description here

I tried playing with padding & margins, but it does not change anything and I do not know where the problem resides.

My code looks like this:

<Autocomplete
    autoHighlight
    value={value ?? null}
    onChange={(event, newValue) => {
        updateValue(newValue);
    }}
    inputValue={inputValue}
    onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
    }}
    sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
    options={displayedOptions}
    getOptionValue={(option) => option?.optionValue ?? ""}
    getOptionLabel={(option) => option?.optionLabel ?? ""}
    renderInput={(params) => (
      <TextField
          {...params}
          variant="outlined"
          fullWidth
          required={required}
          label={label}
          InputLabelProps={{ shrink: true }}
        />
    )}
/>

Has anyone faced this problem before?

Solution

  • The problem is related to the styles.

    From this sx prop:

     sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}

    You need to delete this part overflow: "hidden", so it should be like:

    sx={{ whiteSpace: "pre-wrap", p: 0, m: 0 }}