React-select: openOnClick

[elghali]

<Select.Creatable ref={(node) => {this.Selectable= node;}} openOnClick={false} searchable={true} multi={true} />

expected behavior:
dropdown doesn't open onclick event,

real behavior:
openOnClick prop is ignored, and the dropdown opens onClick event

[elghali]

anything? @JedWatson

[mvf4z7]

I am curious about this too @JedWatson

I think the culprit might be here
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L319

The OnMouseDown event handler calls focus on the input, the handler for which blindly opens the menu rather than checking the this._openAfterFocus;

[TimCannady]

Curious about this, too.

openOnClick={false} only seems to work for the initial click into the input field. Any subsequent clicks will open the control, which is unexpected.

[rozsival]

I ran into the same issue. I needed the options dropdown to open when user starts typing only. I resolved it temporarily by wrapping the Select component into my own with state indicating whether the options should be shown or not and according to this state just dynamically change styles of .Select-menu-outer class, which contains the dropdown.

You can do this via onInputChange prop of the Select component, which returns current value of the input. If value.trim() !== '' (adjust if you use multiselect, I needed single string value only) you can setState({ showOptions: true }) and vice versa. Then just apply .Select-menu-outer { display: none !important } or .Select-menu-outer { display: block !important } in styles of your wrapping component based on current state to override the default behavior.

[guerrap]

I think I found another solution, using the prop menuIsOpen, without involving css changes.
You have to control the rendering of the menu with menuIsOpen and add custom event handlers for onInputChange, onChange and onBlur: onInputChange you just check if the action performed is input-change and then set openMenu (in the component state) to true; onChange and onBlur events you just hide the menu.
Code:

<Select
    inputValue={value}
    onInputChange={this.handleInputChange}
    onChange={this.hideMenu}
    onBlur={this.hideMenu}
    options={dataSource}
    menuIsOpen={openMenu}
/>

handleInputChange = (query, { action }) => {
    if (action === "input-change") {
        this.setState({ openMenu: true });
    }
};

hideMenu = () => {
    this.setState({ openMenu: false });
};

[ibrahimkte]

you're the real MVP @guerrap

[ShivaniBali]

@guerrap : First off thank you for the solution above.
I'm going a little bit out of context here, but is there any way if the search in drop down begins after we enter three words.

thank you!

[gregholst]

@ShivaniBali I had the requirement to show the menu only after at least 2 digits have been entered. I used the solution proposed here https://github.com/JedWatson/react-select/issues/3643 to avoid the 'no options' menu being shown

[guerrap]

@ShivaniBali I am no longer working on that project sorry, but I think that something like this should work:

 handleInputChange = (query, { action }) => {
     if (action === "input-change" && query.length >= 3) {
         this.setState({ openMenu: true });
     }
 };

The dropdown will open after the user enters 3 digits.

[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!