[material-ui][Select] Changing IconComponent makes the new icon unclickable

[CzechCoder]

Steps to reproduce

Link to live example: (required)

Steps:

1. Change IconComponent to another component, could be a Material Icon or custom svg image.
2. Compile
3. Cursor will change to select type instead of pointer and becomes unresponsive to click, Select can be opened only by clicking on the text part of the component.

Current behavior

New icon is not clickable

Expected behavior

New icon should be clickable and open the Select dropdown

Context

I want to use a custom icon while retaining the original Select functionality.

Your environment

npx @mui/envinfo

I use Google Chrome on Mac OS. ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: select icon

[sohail9744]

This issue seems to be related to the Select component's IconComponent prop in Material-UI (MUI). When you replace the default icon with a custom component, the custom component may not handle click events as expected, causing the Select component to be unresponsive to clicks on the icon.

To address this, you can ensure that the custom IconComponent correctly forwards refs and handles events. Here’s a general approach to solve this issue:

1. Ensure the Custom Icon is Clickable: Ensure your custom icon component is a proper button or clickable element. It should forward refs and handle click events appropriately.

2. Using the forwardRef in the Custom Icon Component: If you are using a custom SVG or icon component, make sure it uses forwardRef to pass the ref down to the underlying DOM element.

Here is an example of how you can create a custom icon component that forwards refs:

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { forwardRef, useState } from "react";
import { Select, MenuItem } from "@mui/material";
import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";

const CustomIcon = forwardRef((props, ref) => (
  <ArrowDropDownCircleIcon {...props} ref={ref} style={{ cursor: "pointer" }} />
));
function App() {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <>
      <Select value={value} onChange={handleChange} IconComponent={CustomIcon}>
        <MenuItem value={10}>My</MenuItem>
        <MenuItem value={20}>Brother</MenuItem>
        <MenuItem value={30}>its</MenuItem>
        <MenuItem value={30}>Working!</MenuItem>
      </Select>
    </>
  );
}

export default App;

In this example, the CustomIcon component uses forwardRef to ensure that the ref is correctly passed to the underlying ArrowDropDownIcon component. This ensures that the Select component can interact with the icon as expected.

screen-capture.webm

[ZeeshanTamboli]

Please provide a minimal reproduction. It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

[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.

[Sen-442b]

@ZeeshanTamboli Here is a minimal repro of the issue. The IconComponent does not receive events from Select. And, the suggested solution by @sohail9744 is not working, as the forwarded ref in the custom icon component is null.

[ZeeshanTamboli]

@Sen-442b You need to forward the props to the svg. See https://stackblitz.com/edit/stackblitz-starters-ralyfq7m.

[Sen-442b]

@Sen-442b You need to forward the props to the svg. See https://stackblitz.com/edit/stackblitz-starters-ralyfq7m.

Thank you for responding. The functionality works fine, but adding props to the SVG introduces alignment issues with the select option text, even when using appropriate dimensions. Do we need to manually adjust the positioning of '.MuiSelect-icon' to align it properly, or is there a better solution? Also, since we are only passing props, I believe forwardRef may not be necessary in this case.

[ZeeshanTamboli]

The functionality works fine, but adding props to the SVG introduces alignment issues with the select option text, even when using appropriate dimensions. Do we need to manually adjust the positioning of '.MuiSelect-icon' to align it properly, or is there a better solution?

Yes, you would need to adjust the positioning of your custom icon.

Also, since we are only passing props, I believe forwardRef may not be necessary in this case.

Correct