react-select : show only the matched options on typing on the select input

Question

I have started using react-select very recently. (https://github.com/JedWatson/react-select)

If the select input is blank and 1. I focus on the select input OR, 2. I click on the inverted arrow situated at the right side of the select input, I get to see all the options in the result list that I have supplied to the Select component by default.

Instead of the above mentioned behavior, I should only be able to see the matched text results when I type something on the input. How can I achieve that?

Answer 1

Control the rendering of the menu with menuIsOpen prop 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.

<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 });
};

Source : https://github.com/JedWatson/react-select/issues/2014#issuecomment-448549849