The select component Icon is not clickable

[zourdyzou]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: I don't have one, but I can provide the behavior here.

Steps:

1. Add Icon Component props and add a custom icon.
2. Click the select area. When I click the icon, the dropdown doesn't show.

https://user-images.githubusercontent.com/69587933/213356489-f3ce0386-d004-4031-9b45-9f1079c9841f.mov

Current behavior 😯

So when the user clicks the select area, the dropdown showed up but when the user clicks the icon area which is still within the select container, it's not showing anything or is not clickable.

Expected behavior 🤔

I've described it above

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 12.4 Binaries: Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm Browsers: Chrome: 109.0.5414.87 Edge: Not Found Firefox: Not Found Safari: 15.5 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.112 @mui/core-downloads-tracker: 5.11.3 @mui/icons-material: ^5.10.15 => 5.11.0 @mui/material: ^5.10.15 => 5.11.3 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.2 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: ^5.17.12 => 5.17.17 @mui/x-date-pickers: 5.0.14 => 5.0.14 @types/react: 18.0.25 => 18.0.25 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.9.3 => 4.9.3 ```

[amanzrx4]

Will you post a sandbox of your Select

[ZeeshanTamboli]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://mui.com/r/issue-template), a link to a repository on GitHub, or provide a proper minimal code example that reproduces the problem.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[MetaMmodern]

@ZeeshanTamboli you actually can take any select sandbox, here's an example: https://codesandbox.io/s/material-ui-custom-dropdown-ufq1t?file=/src/DropDown.js

Clicking icon doesn't open the popup(the same as in TS example video). But the core reason is usually the same(read below).

I had this issue as well and my problem was that I added padding-right into MuiInputBase-root. But I didn't have to. Here's what it looked like with devtools:

That shifted the inside select element to the left. The select element is the one that's clickable, not the MuiInputBase element.

@zourdyzou your layout of inputBase may be different but the core reason is the same: the select element doesn't overlap the icon. Make sure it does and then you'll be able to click the whole area. (Technically you should understand that it's not the icon that you click, it's still the select input being clicked, it just overlaps the icon and creates an illusion of interactive icon)This is a tip for anyone reaching similar problem.

[ZeeshanTamboli]

Do also take a look at Base UI Select component for more customization. The icon is clickable. We will be migrating the Material UI's Select component to use the Base UI one internally in the next major version. It should unlock these cases, which are caused unknowingly.

[spanic]

Hi, maybe that will be helpful for someone: I also faced the same problem, and here's how I fixed it:

1. Set svg element's position to absolute, moved it to the right side by adding right: 0
2. added padding-right to the .MuiSelect-select element to have some space between the icon and chosen option text
3. added pointer-events: none to the svg element

Pretty simple, and works fine.

[HassanRazaMuhammadTufail]

@spanic Thanks. Your solution worked for me, I just only needed to add z-index to the child div of select element.

[Khr0mZ]

this works

IconComponent={(e) => <ArrowDropDown className={e.className} />}

[RodrigoRVSN]

Spreading the props into the custom component solved it for me. I was not spreading before and the className was not being passed to the custom icon component, as commented by Khr0mZ

const SelectIcon = (props: CommonProps) => <ArrowDownIcon {...props} fontSize="medium" />
...
IconComponent={SelectIcon}