12

I try to apply react-select to create async selection like the demo, And want to add default value for the input.
As below, the default value will be clear when onBlur because onBlur will default trigger handleInputChange event with empty value.
I guess this might case by some default setting like 'onBlurResetsInput', but 'onBlurResetsInput' props has be removed at v2.0.0. So want to know how to prevent onBlur reset, thanks.

import Async from 'react-select/lib/Async';
export class AsyncSelect extends React.PureComponent {
  state = {
    inputValue: this.props.defaultValue,
  }

  handleInputChange = (value) => {
      this.setState({
        inputValue: value,
      });
      this.props.syncOptions(value);
  }

  render() {
    return (
        <Async
          inputValue={this.state.inputValue}
          onInputChange={this.handleInputChange}
          options={this.props.options}
          onChange={(option) => this.props.selectOption(option.value)}
        />
    );
  }
}
1
  • Has it been resolved? I need this solution as well. Commented Nov 18, 2019 at 5:36

3 Answers 3

5

Have you tried defaultInputValue={this.state.inputValue}? You can read more about it here.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the feedback. I try defaultInputValue and it will also be reset when onblur.
0

See this ...
https://github.com/JedWatson/react-select/issues/2877
It is basically you have to have a state that will be populated with the default options and then add to this state on input change (In case you use multiple select), or replace the state on input change (In case you use single select)

Comments

0

Just use a conditional rendering, If the component has defaultValue then and only then render the Select field.

1 Comment

No, there is the option that the select can appear as empty too

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.