react-select - Open Select on selected value click (multiselect)

Question

I am using react-select with multi-selection enabled. How can I force the drop-down menu to open, on a selected value click?

Here is a snippet of the code so far:

[...]
valueClick(value) {
    this.DOMNode.focus();
},

<Select
    multi={this.state.multi}
    onChange={this.handleSelectChange}
    options={options}
    ref={(ref)=>{this.DOMNode = ref}}
    autosize={false}
    openOnFocus={true}
    value={value}
    onValueClick={this.valueClick}
/>
[...]

As you can see, I am trying to employ the focus functionality to force the menu to open, as suggested by the creator of the component. I have set the openOnFocus variable to true and manually set a ref to the component itself. You can also see the function that calls the focus() method above.

What am I missing?

Answer 1

There is a new prop, menuIsOpen . All you need to add is menuIsOpen={true} and it will stay open.

Answer 2

现在，在新版本中有一个属性menuIsOpen来控制它。

Answer 3

For people interested in this for debugging/styling purposes only:

I managed to force it by changing the internal state.isOpen through the React Chrome plugin.

In my case I wanted to tweak the CSS and needed to focus on the container ( Select-menu-outer ) to change its CSS.