[Select] open/close indicator icon issue when endAdornment is set

[nodirbekprogrammer]

Steps to reproduce

Steps:

1. Open this link to live example: Link
2. Click select indicator icon

Current behavior

When endAdornment is set, the menu does not appear when you click the open/close icon in select. But it does have focus.

Expected behavior

The menu should open or close when you click the open/close icon in any case.

Context

This is very important for the user experience. Almost all users click on that icon to open the menu.

Your environment

mui/material v6.4.3

Search keywords: select, endAdornment, indicator

[aarongarciah]

Hi @nodirbekprogrammer, the endAdornment is on top of the Select's chevron icon, that's why it doesn't work. May I ask what's your use case for having an endAdornment in a Select? Having both the endAdornment and the chevron icon present at the same time is not ideal. You can hide the chevron icon using the IconComponent prop.

I think the only reason the endAdornment prop is supported in Select is because Select extends the OutlinedInput component.

[nodirbekprogrammer]

Assalamu alaykum @aarongarciah. As I showed in the example, I need it to refetch data. Removing the chevron icon and leaving the refetch button alone looks very awkward and ugly. Surprisingly, this works without problems in AutoComplete. It would be great if these contextually similar components worked the same.

[aarongarciah]

@nodirbekprogrammer may I ask how do you handle this with the Autocomplete? AFAIK passing an endAdornment to the input hides the chevron (popupIcon) even when using the forcePopupIcon prop. See this example: https://codesandbox.io/p/sandbox/blazing-star-spc5v6