[autocomplete] InputProps startAdornment incompatibility with multiple

[Lagicrus]

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

Within lab version 4.0.0-alpha.56, core 4.11.0, when you use startAdornment within InputProps in Autocomplete, as well as multiple. The multiple tags do not appear but act as though you triggered them.

Expected Behavior 🤔

Have a startAdornment persisting at the same time as using multiple tags

Steps to Reproduce 🕹

Proof can be found here
Within said demo you will see 2 autocomplete fields, the only difference (besides the ID) is that the top (broken) one sets the startAdornment to "test", whilst the second does not.
Plain code can also be found here incase for some reason the sandbox doesn't work.

Steps:

1. Setup a autocomplete
2. Setup renderInput
3. RenderInput uses TextField
4. TextField sets InputProps
5. InputProps sets startAdornment (whether it is text or icon doesn't matter)

Context 🔦

Attempting to use the startAdornment as a "pending" kind of tag. So the user first uses AC to figure out what "tag" then when that is done, it is passed to startAdornment, and based upon that, the user is then prompted with AC based upon said "tag".

Your Environment 🌎

Tech	Version
Material-UI/core	v4.11.0
Material-UI/lab	v4.0.0-alpha.56
React	v16.13.1

[joshwooding]

Since Autocomplete uses startAdornment to add the tags you will need to still pass the startAdornment prop through e.g.

<TextField
  {...params}
  label="Proof of Concept"
  fullWidth
  InputProps={{
    ...params.InputProps,
-   startAdornment: "test"
+   startAdornment: <>test{params.InputProps.startAdornment}</>
 }}
/>

Probably worth highlighting this in the docs. cc @oliviertassinari

[Lagicrus]

Since Autocomplete uses startAdornment to add the tags you will need to still pass the startAdornment prop through e.g.

<TextField
  {...params}
  label="Proof of Concept"
  fullWidth
  InputProps={{
    ...params.InputProps,
-   startAdornment: "test"
+   startAdornment: <>test{params.InputProps.startAdornment}</>
 }}
/>

Probably worth highlighting this in the docs. cc @oliviertassinari

Thanks for that one :)
Now I have seen it, it does make a lot more sense.

I agree with your doc idea, but might I add the further suggestion of, if MUI detects both multiple in use and a user set startAdornment it triggers a warning in the console? I am unsure of how feasible that is as that is outside of my knowledge but I feel that could definitely help avoid the same problems.

[oliviertassinari]

Probably worth highlighting this in the docs

@joshwooding Agree, this would great, this issue is a duplicate of a couple of others.

Where should we put the docs section?

[joshwooding]

Probably worth highlighting this in the docs

@joshwooding Agree, this would great, this issue is a duplicate of a couple of others.

Where should we put the docs section?

It's hard to say, I imagine a demo showing an Autocomplete with a start adornment with some text explaining the behaviour will suffice but I wouldn't know where to add it on the Autocomplete page.

[oliviertassinari]

We have a demo with endAdornment but at the bottom of the page. Maybe we could have a note about the structure of the renderInput arguments and the points to be cautious with in https://next--material-ui.netlify.app/components/autocomplete/#custom-input?

[joshwooding]

We have a demo with endAdornment but at the bottom of the page. Maybe we could have a note about the structure of the renderInput arguments and the points to be cautious with in https://next--material-ui.netlify.app/components/autocomplete/#custom-input?

The endAdornment demo is for Asynchronous autocompletes. No one would know to check there? Adding a note in custom input about adornments seems useful.

[hkurra]

@oliviertassinari @joshwooding We can also add Input Adornment section same as like TextFeild, where we can mention a Note on this consideration, Moreover, we can also mention that Tags/chips(in multiple mode) and icons are implemented using Adornment so don't forget to add them along with custom Adornment.
I also really like the idea of @Lagicrus to trigger the warning on the console, but Autocomplete doesn't have access to InputFIeld props unless it will save the result of renderInput in some variable and verify the props in dev mode? not sure this would be a good change?

[oliviertassinari]

@hkurra Yeah, the warning part is not possible.

[Lagicrus]

Understandable that the warning part wasn't possible, I just recalled it from somewhere else in mui and thought that it applied rather well here.
This is just a thought, due to me not understanding how the logic works, but wouldn't it be possible for the Input to trigger the warning instead? Like, if it got told from two different sources the endAdornment? Again this is just a guess 😅