CODEWITHSUNDEEP
reactjsreact-select
Kanekar
Kanekar

Reputation: 161

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

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.

enter image description here

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;

Upvotes: 0

Views: 3037

Answers (2)

Apostolos
Apostolos

Reputation: 10463

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}

Upvotes: 0

Vagan M.
Vagan M.

Reputation: 463

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

Upvotes: 0

Related Questions