Adding a custom compoenent to handle its own clicks

[cubecleveland]

Hellow im using custom compoenents to chang the look and feel of the menu.
Inside the menu i have the following code:

const Menu = (props) => {
  return (
    <>
      <components.Menu {...props}>
        <div>
          {props.selectProps.isAdding ? (
            <GroupAdd />
          ) : (
            <>
              <div>{props.children}</div>
              <button
                type="button"
                className={"change-data"}
                onClick={() => props.selectProps.setIsAdding(true)}
              >
                Change data
              </button>
            </>
          )}
        </div>
      </components.Menu>
    </>
  );
};

Basically, if a stats is toggles the view of the menu changes from showing the childrent ot another component.

The compoenent thats added is being regarded as an option so any click event in it closes the dialog immediatly.. any change to not pss the event clocks from this cooenent to the React select compoenent.

[ebonow]

Unfortunately part of the behavior of react-select checks to see if a click is outside the MenuList component and not the Menu. For time being, it may be easier to modify the MenuList instead, though it's unclear if that still fits your use-case.

You can read more about the related open issue here: #3076