[v2] Click events not firing on elements of custom Menu

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.

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

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