Search code examples
javascriptreactjsreact-select

React select v2 on space press selects first value


When on Select field I hit space, first value from options is being selected. How to disable such behaviour?

<Select
  ref={r => (this.selectRef = r)}
  className="basic-single"
  classNamePrefix="select"
  onInputChange={val => {
    console.log('va', val)
    this.setState({ inputValue: val })
    }}
  inputValue={this.state.inputValue}
  options={[{ value: 'aaa', label: 'aaa bbb' }, { value: 'bbb', label: 'bbb ccc' }]}
  name="color"
/>

HERE IS A DEMO


Solution

  • I would suggest to use the onKeyDown props and prevent the action when the use hits the space bar so nothing will be selected.

    <Select
       ref={r => (this.selectRef = r)}
       className="basic-single"
       classNamePrefix="select"
       onInputChange={val => {
         this.setState({ inputValue: val });
       }}
       onKeyDown={e => {
         if (e.keyCode === 32 && !this.selectRef.state.inputValue) e.preventDefault();
       }}
       inputValue={this.state.inputValue}
       options={[
         { value: "aaa", label: "aaa bbb" },
         { value: "bbb", label: "bbb ccc" }
       ]}
       name="color"
     />
    

    Live example here.