react-select: Cannot clear value manually (not truly controlled) when there is no match

It seems that the component is not controlled when the search result is not a match of the options.

Example: https://plnkr.co/edit/b85HMDbt0jUZjkwCE7jG?p=preview

Using 1.0.0-rc.10.

I use the component to do a complex search from a number of filters (react-select being one of them). My external function is unable to clear the component by simply settings value={} to the empty string/undefined/null.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (8 by maintainers)

Most upvoted comments

Hi @zivester you are right it’s never cleared out due to inputValue is still controlled within the Select component. This will be a harder bug to fix because we own the state with inputValue.

In regards to the value always being an object, you can pass in a falsey value or an object. A falsey value tells us that the value should be cleared.

agirton on Nov 29, 2017

Hi @zivester the example you gave us includes some incorrect code.

The onChange handler should not be

onChange(val) {
      console.log("onChange: " + val);
      const value = { label: val || '', value: val || '' };
      this.setState({ value });
  }

but

onChange(val) {
      console.log("onChange: " + val);
      this.setState({ value: val });
  }

The reason is because you are still passing in an object and we don’t do a diff to check if all of the values on the object are empty.

agirton on Nov 29, 2017

No that doesn’t work. I’ve tried numerous combinations of setting value to null, undefined, and empty string but none of them work for me. Feel free to play with the plnkr, I’m pretty sure it’s a bug.

zivester on Nov 24, 2017