Question 73124 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Clicks on IconButton inside MUI's Select is not handled – Reactjs

I’m trying to add a help icon inside a Select component, and would like to do something like this:

        <Select
            onChange={event => {
                ...
            }}
            value={mode}
            variant='outlined'
        >
            {modes.map(m => (
                <MenuItem
                    key={m.key}
                    value={m.value}
                >
                    {m.label}
                    <IconButton
                        onClick={() => {
                            alert('Clicked!')
                        }}
                    >
                        <HelpIcon />
                    </IconButton>
                </MenuItem>
            ))}
        </Select>

I.e. I want to open the dropdown like normal when clicking the label and also be able to capture the click on the IconButton. What happens with the above code is whenever I click the IconButton, the onClick is not fired (i.e. the alert(‘Clicked!’) is not called), and the Select dropdown opens.

Is there any way to prevent clicks on the IconButton from opening the dropdown, and only be handled by IconButton’s onClick ?

See minimal example here: https://codesandbox.io/s/select-onclick-on-menuitems-button-gedusv

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    A solution that seems to work is to rather handle the mouseDown event:

        <IconButton
      onMouseDown={(e) => {
        e.stopPropagation()
        alert("Clicked!");
      }}
    >
      <HelpIcon />
    </IconButton>

    Not sure if this is the best solution, but seems like it does the trick


  2. 0

    You will need to use event.stopPropagation() to stop the click event from the IconButton from bubbling up and triggering the change event of your Select component.

    <IconButton
   onClick={(event) => {
     event.stopPropagation();
     alert('Clicked!')
   }}
>
  <HelpIcon />
</IconButton>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search