Close menu on container scroll

Question

I want to close the react-select menu when scrolling a container outside of the select control. There is a closeMenuOnScroll prop in the official react-select documentation which states the following: closeMenuOnScroll prop

However, when I set closeMenuOnScroll={() => true} prop on the <Select /> component, it closes the menu even if I scroll inside of it (I can't scroll the menu options, because it is automatically closed).

<Select
   options={options}
   closeMenuOnScroll={() => true}
/>

What I try to achieve is to go through (scroll) the menu items when I scroll inside the react-select component and close the menu if I scroll out of it.

Thanks.

Answer 1

I guess its too late but here is a solution to your issue.

 closeMenuOnScroll={(e) => {
                  if (e.target.className === " css-4ljt47-MenuList") {
                    return false;
                  } else {
                    return true;
                  }
                }}

Here in my case " css-4ljt47-MenuList" is my menuList's className.

and this works smooth.

Answer 2

Like the documentation says :

If true, close the select menu when the user scrolls the document/body. If a function, takes a standard javascript ScrollEvent you return a boolean: true => The menu closes false => The menu stays open

https://react-select.com/props

so your code has to be like this:

closeMenuOnScroll={e => {
    if (e.target === document) {
      return true
    } else {
      return false
    }
  }}