CODEWITHSUNDEEP
reactjsreduxonblurreact-select
Michal
Michal

Reputation: 87

onBlur resets value in react-select

I have problem with react-select. When I type some text in searchable input and click outside, my text is disappear. I tried onBlur={() => input.onBlur({value: input.value})} and it works fine but I have ugly errors in console. Something like Uncaught ReferenceError: input is not defined.

onChangeValue = (newValue) => {
  const inputValue = newValue.replace(/\W/g, '');
  this.setState({ inputValue });
  this.props.nameFilter(inputValue);
};

handleCloseMenu = () => {
  this.setState(({
    menuIsOpen: false,
  }))
  input.onBlur(input.value)
};

handleOpenMenu = () => {
  this.setState(({
    menuIsOpen: true,
  }))
  input.onBlur(input.value)
};

render() {
  return (
   <div className="container">
    <AsyncSelect 
      className="search-input"
      onFocus={this.handleOpenMenu}
      onBlur={this.handleCloseMenu}
      menuIsOpen={this.state.menuIsOpen}
      loadOptions={this.loadOptions}
      defaultOptions
      onInputChange={this.onChangeValue}
      placeholder="Search..."
    />
  </div>    
  )};
};

Is there any workaround without using redux-form?

The same problem like here but I am not using redux-form and those solutions doesn't work.

Upvotes: 6

Views: 12507

Answers (1)

Rahimuddin
Rahimuddin

Reputation: 614

In the provided code, you are using 'input' but no where its been declared. You should pass it from props.

handleCloseMenu = (props) => {
  const { input, options } = props;
  this.setState(({
    menuIsOpen: false,
  }))
  input.onBlur(input.value)
};

handleOpenMenu = (props) => {
  const { input, options } = props;
  this.setState(({
    menuIsOpen: true,
  }))
  input.onBlur(input.value)
};

It worked for me.

Upvotes: 0

Related Questions