I have created a custom dropdown menu in Javascript React using the react-select ponent. By using the optionComponent prop I was able to render each option with a checkbox (see image). My problem is now that once you click any checkbox the select options close which is not a very good user experience.

Image:

Therefore my question is if there is any way of preventing the drop-down from closing until the user clicks the arrow in the right-hand side of the select to make it possible to tick and untick any number of check boxes before closing down the options.

I have created a custom dropdown menu in Javascript React using the react-select ponent. By using the optionComponent prop I was able to render each option with a checkbox (see image). My problem is now that once you click any checkbox the select options close which is not a very good user experience.

Image:

Therefore my question is if there is any way of preventing the drop-down from closing until the user clicks the arrow in the right-hand side of the select to make it possible to tick and untick any number of check boxes before closing down the options.

• javascript
• reactjs
• react-select

• stackoverflow./help/how-to-ask – Yury Tarabanko Commented Sep 1, 2017 at 9:21
• event.preventDefault() can be used to prevent the close on selection. On click of arrow you can write code to close. – Vishal Commented Sep 1, 2017 at 9:55
• Wele to Where Developers Learn, Share, & Build Careers! Please edit to add meaningful code and a problem description here. Posting a minimal reproducible example that demonstrates your problem would help you get better answers. Thanks! – Dan Mason Commented Sep 1, 2017 at 10:38

2 Answers 2

You could stopPropagation of the click event from the checkbox element.

Let's assume this is your checkbox click handler:

onClickHandler = (e) => {
    e.stopPropagation();
    //do some other logic
}

This way, when the checkbox is clicked, it will not trigger the select handler on the dropdown.

For anyone who is trying to stop do the e.stopPropagation() and still isn't working, a workaround I found is to set the z-index: -1 to my custom ponent. That has the result to put my ponent below the row that react-select is creating, so my ponent looks like is clicked, but what really does is to listen to the click on the row. Also this solves the main issue that it will not close the list popup

Example:

      <ponents.Option
        {...rest}
        isDisabled={isDisabled}
        isFocused={isFocused}
        isSelected={isSelected}
        innerProps={props}
      >
        <CustomCheckbox
          isSelected={isSelected}
          isDisabled={isDisabled}
          style={{ zIndex: '-1' }} // Easiest possible fix for the issue when clicking on a custom element would dismiss the list Popup.
        >
          <div className={'px-6 text-t-primary'}>{children}</div>
        </CustomCheckbox>
      </ponents.Option>