Material-ui: select TextField with endAdornment overlap with arrow_drop_down icon

[jianglin101]

• [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 there is a endAdornment in select box, it will overlap the arrow_drop_dwon icon, or even if these don't overlap, the arrow_drop_down icon is no longer clickable if it's next to endAdornment. I had this issue because I inject the error icon if user doesn't select anything for required select field. I found almost every test user tries to open the select menu by clicking the icon. I didn't found how Material Design guidelines handle this case. material-ui puts the svg in MuiInputBase, should the icon be in the MuiSelect? so the arrow_drop_down icon is always clickable to open the select menu.

Expected Behavior 🤔

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-e7hj1

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.?.? |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

@jianglin101 Seem you shouldn't provide an endAdornment prop.

[oliviertassinari]

It seems we had a regression between v3 and v4: https://codesandbox.io/s/material-demo-4qlpy. To dive into it.

[Fl4v10]

I've got the same issue using "@material-ui/core": "^4.7.2"

[ryanburr]

@oliviertassinari What was the reason for the wontfix label? This still looks like an issue in 4.9.x. The code sandbox you provided functions how I would expect.

Here is a code sandbox with the issue in 4.9.x

The use case I have is to adorn an error or success icon to my inputs to provide the user with better feedback.

[oliviertassinari]

@ryanburr What's your use case for using the prop?

[ryanburr]

We adorn various icons to the end of our input components to provide things like help and error tooltips

[Memogcia]

Quickly dirty solution for this:

Comment in #17799