Autocomplete + textfield leads to the label overlapping

[sjudd]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

Expected behavior

Context

I'm writing a medication picker using react-hook-forms with autocomplete boxes for a few fields. Each row is a flex box with a column layout, inside are a bunch of fields. Three of those fields are Autocomplete boxes similar to the one I've pasted below.

The label is positioned incorrectly for all three, but only in my production environment. It's most obvious when there's no valid value, but even when there is, the label is still too close to the text.

I'm using vite to build, I do not know what would be different between vite and vite build that would impact this.

I can hack around this by adding:

.MuiAutocomplete-root .MuiInputLabel-root {
    top: -6px;
}

After which it's approximately right in chrome in both the populated and empty states.

I can try and work on a reproducible demo later, I suspect it's going to be a challenge :/. If anyone has any ideas on things I can try please let me know.

 <Controller
      control={control}
      name="route"
      rules={{
        required: true
      }}
      render={({ field: { ref, value, onChange }, fieldState }) => {
        return (
          <Autocomplete
            className="route"
            ref={ref}
            options={ROUTES}
            openOnFocus
            value={value ?? null}
            onChange={(_, newValue, reason) => {
              onChange(reason === "clear" ? null : newValue);
            }}
            renderInput={(params) => {
              return (
                <TextField
                  {...params}
                  error={Boolean(fieldState.error)}
                  helperText={fieldState.error?.message}
                  multiline
                  label="Route"
                  variant="standard"
                />
              );
            }}
          />
        );
      }}
    />

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.1
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.140
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/core-downloads-tracker:  6.2.1 
    @mui/icons-material: ^6.2.1 => 6.2.1 
    @mui/material: ^6.2.1 => 6.2.1 
    @mui/private-theming:  6.2.1 
    @mui/styled-engine:  6.2.1 
    @mui/system:  6.2.1 
    @mui/types:  7.2.20 
    @mui/utils:  6.2.1 
    @types/react: ^18.2.47 => 18.2.77 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.7.2 => 5.7.2 

Search keywords: autocomplete label textfield overlap position

[sjudd]

I should also add that several other TextFields without the Autocomplete work fine in both environments. It kind of looks like the height of the Autocomplete TextFields is shorter than expected.

[mj12albert]

It kind of looks like the height of the Autocomplete TextFields is shorter than expected.

I kind of know this issue, but I'm not sure how it could lead to the situation in your screenshot 🤔
(Maybe you customized the theme quite a bit?)

Could you make a simple repro in codesandbox/stackblitz? @sjudd