[Autocomplete] Composing `endAdornment` overlaps collapse/expand icon

See https://github.com/mui-org/material-ui/issues/28465#issuecomment-927613778 for general problem description.

• 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 😯

endAdornment overlaps with the loading indicator.

Example code:

    renderInput={(params) => {
      return (
        <TextField
          // eslint-disable-next-line react/jsx-props-no-spreading
          {...params}
          label={'Select service providers'}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <React.Fragment>
                <CircularProgress color={'inherit'} size={20} />
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
        />
      )
    }}

Expected Behavior 🤔

Loading indicator should be positioned next to the endAdornment as it was in v4

Steps to Reproduce 🕹

Frozen CodeSandbox: https://codesandbox.io/s/autocomplete-composed-endadornment-vemqi

Steps:

1. Migrate from v4 to v5 using safe codemod
2. Setup async Autocomplete component as described here: https://mui.com/components/autocomplete/#asynchronous-requests

Context 🔦

Not really sure what to write here… Well, the code above worked perfectly in v4 but now it seems to be broken for me…

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.11 Linux Mint 20.2 (Uma)
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.5/bin/yarn
    npm: 7.20.6 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.47 
    @mui/icons-material: ^5.0.0 => 5.0.0 
    @mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.47 
    @mui/material: ^5.0.0 => 5.0.0 
    @mui/private-theming:  5.0.0 
    @mui/styled-engine:  5.0.0 
    @mui/styled-engine-sc: ^5.0.0 => 5.0.0 
    @mui/styles: ^5.0.0 => 5.0.0 
    @mui/system:  5.0.0 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.0 
    @types/react: ^17.0.21 => 17.0.21 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.1 => 5.3.1 
    typescript: ^4.4.2 => 4.4.3

[corbenf-shuttlerock]

Please consider re-opening this @eps1lon. We are having the same issue with the following code:

      renderInput={(params) => {
        return (
          <TextField
            {...params}
            size="small"
            name={name || ''}
            label={label}
            placeholder={placeholder}
            helperText={helperText}
            error={error}
            required={required}
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <>
                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
                  {params.InputProps.endAdornment}
                </>
              ),
            }}
          />
        );
      }}

digging a bit and comparing with the example in the docs, it appears this is only an issue when using size="small" (removing this prop results in the loader being positioned correctly) because size="small" is removing the padding-right required to align the spinner properly (or any other endAdornment for that matter)

with size="small"

without

[DeLm0re]

I ran into the same issue. Using Autocomplete component with size='small' overlaps endAdornment & expand icon.

As I understand, it is because Autocomplete use an InputBase component with a padding set to 6px if size='small' :

In my opinion, the proper way to deal with that, is to override your Autocomplete styles via your theme configuration. Something like :

// under theme.components

MuiAutocomplete: {
    styleOverrides: {
        root: {
            '.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
                padding: '39px',
                // or padding: theme.spacing(X) if you want to be more precise & already defined your theme
            },
        },
    },
},

Each Autocomplete with size='small' will now be rendered with a 39px padding preventing overlaps.

Hope this helps you.