CODEWITHSUNDEEP
javascriptreactjs
john316
john316

Reputation: 83

Enable Select List Visible Only When Searched

I am using api called react-select to have language options to choose.

 <Select
   isMulti
   name="langs"
   options={langOptions}
   defaultValue={{
        value: "English",
        label: "English",
        nativeName: "English",
        isFixed: true,
        backgroundColor: "black"
   }} 
   onChange={(data, e) => handleSelectLanguages(data, e)}

/>

But there are too many options so I want to hide the options and only shows the one that matches my keyboard input.

For example, if I start typing k, the options with K shows up. Searching thing works but I want to hide the options initially.

Please help! thank you!

Upvotes: 1

Views: 49

Answers (1)

Tholle
Tholle

Reputation: 112807

You can control the input value and the isMenuOpen prop and set that to true only when the input string has a length greater than 0.

Example

class App extends React.Component {
  state = {
    selectedOption: null,
    inputValue: ""
  };

  handleOptionChange = selectedOption => {
    this.setState({ selectedOption });
  };

  handleInputChange = inputValue => {
    this.setState({ inputValue });
  };

  render() {
    const { selectedOption, inputValue } = this.state;

    return (
      <Select
        value={selectedOption}
        inputValue={inputValue}
        onChange={this.handleOptionChange}
        onInputChange={this.handleInputChange}
        menuIsOpen={inputValue.length > 0}
        options={options}
      />
    );
  }
}

Upvotes: 3

Related Questions