React-select: Clicking on Option which contains checkbox doesn't get selected but menu gets closed.

[bharathnayak03]

https://github.com/JedWatson/react-select/blob/292bad3298f2cafad6767f2134bd79a9c27e4073/src/Select.js#L1100

This doesn't work in every case as In between blur events , document.activeElement will be pointing to body. as referred by this thread https://stackoverflow.com/questions/11299832/document-activeelement-returns-body

I had a use-case where I was using checkbox (wrapped inside a label) inside an option.
where onclick of checkbox label was trying to add focus to the checkbox which was triggering blur event for input box. instead of selecting the option it was causing the menu to close.

instead of using document.activeElement we can use event.relatedTarget which works

[ebonow]

This is still an issue for me, but I just came up with a workaround.

I am using Checkboxes as a child of a MultiSelect Option. The behavior of this is that clicking the (inline) checkbox itself closes the select menu as opposed to clicking on the option but outside the content area of the checkbox and its label which does not close the menu (with the select prop closeMenuOnSelect set to false when isMulti is true)

To fix this, I had to wrap a div around the checkbox in my custom Option component and set an onClick handler on the div to prevent event propagation.

const Option = ({ children, ...props}) => {
  const { isSelected, label, value, isMulti, data } = props;

  const onClick = (e) => {
    props.selectOption({...data});
    e.stopPropagation();
    e.preventDefault();
  }

  if (isMulti) {
     return (
       <components.Option {...props}>
         <div className="multi-select-option" onClick={onClick}>
            <Checkbox checked={isSelected} label={label} value={value} />
         </div>
       </components.Option> 
     );
  }

  // Other code for returning option component if not isMulti goes here but simply can be...
  return <components.Option {...props} children={children} />

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!