React-select: Keep menu open after selecting

[ghost]

Is there any way to keep the menu open after selecting an element? I want my users to quickly test different options (font styles) while seeing the effect in a live preview.

[FranBran]

+1

[mrfr0g]

@okonuskan You can do this is a semi-hacky way. Using a ref function you can get a reference to the select instance and overwrite its setValue method. Here is an example;

function selectRef(selectInstance) {
  var originalSetValue = selectInstance.setValue;
  selectInstance.setValue = function() {
    originalSetValue.apply(this, arguments);
    selectInstance.setState({
      isOpen: true,
    });
  }
}
...
render: function() {
  return (
    <Select ref={selectRef} />
  );
}

This works because React resolves state changes in batches. In this case it receives two setStates for isOpen, and accepts the last value in the stack.

[southerncross]

+1

@mrfr0g Thanks for your answer. I've tested it but it does not work. :cry:

[shravyaRB]

@mrfr0g thanks it worked for me :)

[crashspringfield]

This didn't work for me. I need a way to keep the menu open so I can try out different stylings in the devtools, but clicking on a div in the devtools to work with it closes the menu.

[mihailmetro]

@crashspringfield You can use the "Pause script" method (press F8 on windows) to stop the script execution

[Hendler]

closeOnSelect: false

[mjhm]

A simpler version of @mrfr0g 's solution that works for me.

<Select ...  ref={(select) => { if (select) select.setState({isOpen: true}) }}/>

[jdbdnz]

@crashspringfield I was also having difficulty keeping this open, specifically in IE11 due to lack of React dev tools. My solution ended up being to set state.isOpen to true onBlur. See following:

```
ref={ref => (this.select = ref)}
onBlur={() => {
this.refs.select.setState({ isOpen: true });
}}
/>

[ArcanisCz]

Had to add some timeout to onBlur in order to work: setTimeout(() => selectRef.setState({isOpen: true}), 50);

[Brett78]

None of the above worked for me on version 2.1.0 but using the following did (until you then click the drop down box) <Select ... defaultMenuIsOpen={true} />

[minhna]

None of the above worked for me on version 2.1.0 but using the following did (until you then click the drop down box) <Select ... defaultMenuIsOpen={true} />

It works. Thank you.

[CarliBotes]

For React-Select v2:

1. To keep it open for the user while they make multiple selections
   <Select closeMenuOnSelect={false} ... />
2. To have open initially for styling with inspect element
   <Select defaultMenuIsOpen={true} ... />

[anthonychung14]

I'm experiencing a race condition even when enabling closeMenuOnSelect.

When I create a breakpoint in react-select's src at the if (closeMenuOnSelect) block, I achieve the desired effect. Without it, state resets so that menuIsOpen is false again.

I had to use https://github.com/JedWatson/react-select/issues/662#issuecomment-422380245 with a small change to setState({ isMenuOpen: true }) instead of isOpen

[ishtiaque-khan]

For React-Select v2:

1. To keep it open for the user while they make multiple selections
   <Select closeMenuOnSelect={false} ... />
2. To have open initially for styling with inspect element
   <Select defaultMenuIsOpen={true} ... />

This worked for me. Thanks @CarliBotes

[AMVazeille]

None of the above worked for me on version 2.1.0 but using the following did (until you then click the drop down box) <Select ... defaultMenuIsOpen={true} />

It works. Thank you a lot.

[alenstdev]

None of the above worked for me on version 2.1.0 but using the following did (until you then click the drop down box) <Select ... defaultMenuIsOpen={true} />

It works only one time on page refresh: but this works as excepted <Select closeMenuOnSelect={false} ... />