title: How to prevent selecting value while enter key press in react-select
body: <p>I am trying to achieve to prevent the enter key selection while user has nothing typed and press the enter key. In current situation when user click on <code>react-select</code> and hit the enter key then its selecting the first value from the drop down, where user has nothing typed but still its selection first value from drop down. Is anyone has any idea to prevent this functionality.</p>
  <p>It should only select when user type something in input box and select or hit enter key.</p>
  <p>here is the screen short where user has nothing typed and press enter key then its selecting first value.</p>
  <p><a href="https://i.stack.imgur.com/MkkD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MkkD8.png" alt="enter image description here" /></a></p>
  <p>here is code:</p>
  <pre><code>  import React from 'react';
    import Select from 'react-select';
  
    class CreateSelectOption extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          selected: this.props.options,
          questionsCount: props.questionsCount,
          inputValue: '',
      }
      this.processQuestions = this.processQuestions.bind(this);
  }
  
  componentWillReceiveProps(newProps) {
      if (newProps.questionsCount.length &gt; 0) {
          this.setState({
              questionsCount: newProps.questionsCount
          })
      }
  }
  
  onChange = (e, props) =&gt;{
      this.props.onChange(e, props.technology, props.id, props.type, props.noc, props.dataTech, props.dataType);
  }
  
  onInputValueChange = inputValue =&gt; {
      this.setState({ inputValue: this.allowOnlyOneSpace(inputValue) });
    };
  
  allowOnlyOneSpace = str =&gt; {
      return str.endsWith(&quot; &quot;) ? str.trim() + &quot; &quot; : str.trim();
  };
  
  render() {
     
      const customStyles = {
          control: (styles, state) =&gt; ({
              ...styles,
              borderRadius: '1px', // default border color
              boxShadow: 'none', // no box-shadow
              color: '#007bff',
              height: '27px',
              minHeight: '30px'
          }),
          singleValue: (styles, state) =&gt; ({
              ...styles,
              color: '#007bff',
              top: '42%'
            }),
          dropdownIndicator: (styles, state) =&gt; ({
          ...styles,
          padding: &quot;6px&quot;
          }),
          menuPortal: base =&gt; ({ ...base, zIndex: 9999, fontSize: '12px' })
  }
      const { selectedTech }=this.props;
      const selectedVal = selectedTech ? { value: selectedTech , label: selectedTech } : null;
      return(
      &lt;Select
          className=&quot;select-width select-color&quot;
          menuPortalTarget={document.body}
          styles={customStyles}
          value={selectedVal}
          onChange={(e) =&gt; { this.onChange(e, this.props) }}
          options={props.technologyArray &amp;&amp; props.technologyArray.map(t =&gt; ({ value: t, label: t }))}
          openMenuOnClick={true}
          placeholder=&quot;Please select tech&quot;
          components={{ IndicatorSeparator: () =&gt; null }}
          inputValue={this.state.inputValue}
          onInputChange={this.onInputValueChange}
          disabled={this.state.inputValue.length === 0}
          /&gt;
      )
  }
  </code></pre>
  <p>}
  export default CreateSelectOption;</p>