Material-ui: [Autocomplete] Cannot use start adornments on multiple select autocomplete

[gerardosabetta]

Using start adornments on multiple select autocompletes makes the chips stop rendering.

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

Current Behavior 😯

If you try to have a multiple select autocomplete with adornment the chips won't render anymore

Expected Behavior 🤔

To have the ability to use adornments without breaking the autocomplete

Steps to Reproduce 🕹

Add InputProps.startAdornment to the params that you get on the render function, pass it onto the textField and see what happens.

https://codesandbox.io/s/bug-on-addornments-b22gr

1. on the first autocomplete, search and try to select options. you will see them selected when the options are shown but you will not see the chips
2. on the second autocomplete you won't even get the options to show
3. the third autocomplete is working just fine without adornments

I tried this approach with non-multiple autocompletes and it worked just fine

[AbleLincoln]

I believe I found a solution: CodeSandbox

The important code is below. Basically, you need to make sure you

1. pass all the params to the TextField with {...params}
2. Explicitly pass InputProps to the TextField. This prop should be an object where you first spread all the props from params.InputProps.
3. InputProps should also have a property called startAdornment. This is the tricky part: make the startAdornment a React Fragment containing whatever InputAdornments you want. Then, pass in the startAdornment from the params with {params.InputProps.startAdornment} as a child.

<Autocomplete
  multiple
  options={top100Films}
  getOptionLabel={option => option.title}
  renderInput={params => {
    return (
      <TextField
        {...params}
        variant="standard"
        label="Multiple values"
        placeholder="Favorites"
        fullWidth
        InputProps={{
          ...params.InputProps,
          startAdornment: (
            <>
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
              {params.InputProps.startAdornment}
            </>
          )
        }}
      />
    );
  }}
/>

Explanation: I think the Chips are themselves InputAdornments and they are added via the startAdornment. So in order to not wipe those out when we pass our own startAdornment, you have to explicitly display the params.InputProps.startAdornment