React-select: [v2] Click events not firing on elements of custom Menu

[giuband]

First of all, thanks for this great component.
I've run into the following issue: I need to add a button as part of the select Menu, but the click events are not firing.

Sandbox example: https://codesandbox.io/s/jz0r9nln69

Code:

const Menu = props => {
  return (
    <React.Fragment>
      <button onClick={() => alert("clicked")}>
        Click me and nothing will happen
      </button>
      <components.Menu {...props}>{props.children}</components.Menu>
    </React.Fragment>
  );
};

export default class SingleSelect extends Component<*, State> {
  render() {
    return (
      <Select
        className="basic-single"
        classNamePrefix="select"
        name="color"
        options={colourOptions}
        components={{ Menu }}
      />
    );
  }
}

Stopping the propagation of the event doesn't seem to help.

[mike1808]

It is because the input of the search is blurred and the current logic is to close the menu what that happens.
I guess you can write your own handlers for onMenuClose and onMenuOpen and make menu controlled.

[giuband]

Thanks @mike1808 , I solved it by making the menu controlled.

[vidur149]

How to stop firing of close menu when select is blurred. I want to somehow modify the logic of onBlur event.
I also tried implementing a custom menu and it closes because onBlur is triggered.

[asthajn]

Hi @giuband , I am trying to have focus on an input in the menu. Not happening. How did you customize for your issue? Maybe that'll give me some hint

<components.Menu {...props}> <input placeholder="Input test" />{props.children} </components.Menu>

[jamesonhill]

I'm manually controlling the menuIsOpen prop and have the same issue trying to focus an input within an option.

[Rall3n]

@jamesonhill @giuband This comment has a solution for an input element inside the menu. Maybe you find your own solution in it.

[kylepeeler]

@giuband Can you provide a code example of how exactly you got this to be controlled in a way that the button event still works? Getting a bit confused, I've tried doing something like this (probably a bit naive...) and it just resets it to the default behavior, and onMenuClose/onMenuOpen don't have any params to check what's exactly going on.

  const [menuIsOpen, setMenuIsOpen] = useState(false);
   <Select
      ...
      menuIsOpen={menuIsOpen}
      onMenuOpen={() => {
        setMenuIsOpen(true);
      }}
      onMenuClose={() => {
        setMenuIsOpen(false);
      }}
    />