How to prevent selecting value while enter key press in react-select - reactjs

Question

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 react-select 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.
It should only select when user type something in input box and select or hit enter key.
here is the screen short where user has nothing typed and press enter key then its selecting first value.
here is 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 > 0) {
this.setState({
questionsCount: newProps.questionsCount
})
}
}
onChange = (e, props) =>{
this.props.onChange(e, props.technology, props.id, props.type, props.noc, props.dataTech, props.dataType);
}
onInputValueChange = inputValue => {
this.setState({ inputValue: this.allowOnlyOneSpace(inputValue) });
};
allowOnlyOneSpace = str => {
return str.endsWith(" ") ? str.trim() + " " : str.trim();
};
render() {
const customStyles = {
control: (styles, state) => ({
...styles,
borderRadius: '1px', // default border color
boxShadow: 'none', // no box-shadow
color: '#007bff',
height: '27px',
minHeight: '30px'
}),
singleValue: (styles, state) => ({
...styles,
color: '#007bff',
top: '42%'
}),
dropdownIndicator: (styles, state) => ({
...styles,
padding: "6px"
}),
menuPortal: base => ({ ...base, zIndex: 9999, fontSize: '12px' })
}
const { selectedTech }=this.props;
const selectedVal = selectedTech ? { value: selectedTech , label: selectedTech } : null;
return(
<Select
className="select-width select-color"
menuPortalTarget={document.body}
styles={customStyles}
value={selectedVal}
onChange={(e) => { this.onChange(e, this.props) }}
options={props.technologyArray && props.technologyArray.map(t => ({ value: t, label: t }))}
openMenuOnClick={true}
placeholder="Please select tech"
components={{ IndicatorSeparator: () => null }}
inputValue={this.state.inputValue}
onInputChange={this.onInputValueChange}
disabled={this.state.inputValue.length === 0}
/>
)
}
}
export default CreateSelectOption;

Answer 1

UPD options={this.state.inputValue.length === 0 ? [] : colourOptions}

Answer 2

try these properties
openMenuOnFocus={false}
openMenuOnClick={false}
and I guess (can't check that right now though) that also this is working too (if selectedVal is present, then it turns to true else false)
openMenuOnFocus={selectedVal}
openMenuOnClick={selectedVal}