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

[zivester]

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.

[agirton]

Hi @zivester value should be a falsey value. In your example you are just setting the label and value to an empty string. You should actually be setting the value of React state to null. Does that help?

[zivester]

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.

[JedWatson]

@zivester can you confirm whether this is fixed by #2179? preview here: https://deploy-preview-2179--react-select.netlify.com/

[zivester]

@JedWatson

Doesn't seem to be working for this bug. It doesn't ever seem to clear the display "label" value, but it does clear the x clear button on certain values:

value equal to null, undefined or the empty string will hide the x button. Display string remains unchanged.

value as an object with value.value as null, undefined or the empty string does nothing.

I'm not sure what is desired with the new 1.0.0 release, but I thought it was suppose to support the full object syntax only now? value = { label: 'Label', value: 'value' };? Which doesn't seem to be affected by that commit at all.

I also wasn't sure how to use the preview you linked, so I just tested locally with master branch w/ that most recent commit.

[agirton]

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.

[zivester]

@agirton I've tried all permutations, here's one using your example: https://plnkr.co/edit/OGimFuPvqMfPHEk5FxWt?p=preview

As you'll see, the x will disappear but the display text (whatever you type in) will not disappear.

I can't find the old migration docs, but I believe they referenced value should be defined as an object with properties label and value (the same as the options array). As for the current README it says it can be of any type.

[agirton]

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.

[yuri-sakharov]

Hi,
It looks fixed in https://github.com/JedWatson/react-select/pull/2183.

[zivester]

I can't type more than one character into the field with that fix @yuri-sakharov

[yuri-sakharov]

Can you provide code example? Because it works fine in my project with this fix.
Draft example:
`import React, {Component} from 'react';
import ReactSelect from 'react-select';

import './App.css';
import 'react-select/dist/react-select.css';

const value = {value: {label: 'a1', value: 'b1'}};
class App extends Component {
constructor(props){
super(props);

    this.state = value;

    this.handleClear = this.handleClear.bind(this);
}

handleClear(){
this.setState({value: {}});
}
render() {

    return (
        <div className='select-container-to'>
            <p>Works </p>
            <ReactSelect
                className='check-select'
                options={[]}
                value={this.state.value}
                onBlurResetsInput={false}
                clearable={true}
            />
            <button onClick={this.handleClear}>Clear</button>
        </div>
    );
}

}

export default App;
`

[zivester]

I've provided two plnkr's in this commit that you're free to alter. The clearing works with your commit, but the controlled portion of it does not. When you type more than a single letter into the component the value is cleared. The check you've put in place is too broad, and I believe too trivial based off of what @agirton is describing.

[yuri-sakharov]

also I copied your code(from top message) as is to my and it woks fine. I use react 16.1.1 and 16.2.0. Please watch attached video.
record.zip

[zivester]

Can you please provide a plnkr/demo of some kind? I can then attempt to show you were it doesn't work on your branch. I can't really do much with a video unfortunately.

Also its already apparent that the x button is not clearing correctly as well.

[yuri-sakharov]

I does'n know how to add my code from this branch with my fix to plnkr/demo

[yuri-sakharov]

I also tried your code from second link on my local draft and it works pretty well with small fix: onChange(val) { console.log("onChange: " + val); this.setState({ value: {} }); }
and x button works correct.

[gwyneplaine]

@zivester thanks for this issue, unfortunately there's no clean way to give you direct control of the inputValue in state by changing the value prop.

This is something we're actively looking to address in future releases. In the meantime, I've added an internal setInputChange method to the Select component. This takes a string argument, calls the onInputChange prop if one exists, and sets the inputvalue in state to the passed in string argument.

You can access this by accessing the ref of the Select component. The implementation PR can be found here, please also see the updated 'States' example for an example of how to use this.

[zivester]

@gwyneplaine thank you for the workaround, that does indeed allow me to programmatically reset it. Unfortunately it introduced the issue #2299 for me, so I'll have to wait until that PR is merged.

[nafg]

https://github.com/JedWatson/react-select/issues/2155#issuecomment-348265238

I can't type more than one character into the field with that fix @yuri-sakharov

same here

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue / pull request is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!