React-select: Select list gets empty on state change

[thirdknife]

I am developing a SPA which has some filters. I am able to add the select list and on change event I am updating the state of the react application.

States

this.state = { genres: null , categories: null , fBooks: [] , gBooks: [] };

React tags

<Select
    name="genre"
    value=""
    options={this.state.genres}
    onChange={logChange}
/>
<Select
    name="category"
    value=""
    options={this.state.categories}
    multi={true}
    onChange={logChange}
/>

logChange

var logChange = (function(val) {
      filterBooks(val.split(','));
    }).bind(this);

and the filterBooks method

var filterBooks = (function(val){
      var selected = [];

      _.filter(this.state.gBooks, function (item) {
        if(_.contains(val, item.genre.name) === true){  
            selected.push(item);
        }
      });
        this.setState({fBooks: selected});
        console.log(selected);

    }).bind(this);

When the select list is first changed, the item are filtered correctly but when I select another option the select list changes to blank. Visuals might help better.

This only happens when I change the state to re-render the list
this.setState({fBooks: selected});
Otherwise it works fine.

[thirdknife]

Do I have to separate the Select tags from the list of books?

[jonathanasquier]

+1

[Lothiraldan]

I have the same problem and you should separate the Select tag in a isolated component which will render only if the options props changed.

Something like:

class JobRunForm extends React.Component {

    shouldComponentUpdate = (nextProps, nextState, nextContext) => {
        return !(nextProps == this.props) ||
          !(nextState == this.state) ||
          !(nextContext == this.context);
    }

    render() {
      return (
        <form className="form-horizontal style-form">
              <Select
                  name="form-matcher-name"
                  options={this.props.matchers}
                  onChange={this.props.onChange}
                  searchable={true}
                  placeholder={'Glob'}
              />
       </form>
     )

The onChange props is passed by the parent and it will change the parent state without re-rendering the JobRunForm.

If you don't need the allowCreate, you should try the beta version, it solves the problem more elegantly.

[jonathanasquier]

I'm using redux-form and the onBlur event used to dispatch empty values which is quite ennoying.
I'ts ugly but it works (1.0.0-beta6):

<Select
     options={options}
    {...field}
     onBlur={function(){}}
 />

[ericqt]

I'm also getting this issue.

Though it happens when I try to set anything state even if it's not related to the select options.

[viveleroi]

Calling setState somehow wipes out the value the select component uses, so what's worked for me is passing that value back to the value attribute. That solves the issue for me.

[huvber]

@jonathanasquier

I'm using redux-form and the onBlur event used to dispatch empty values which is quite ennoying.
I'ts ugly but it works (1.0.0-beta6):

options={options}
{...field}
onBlur={function(){}}
/>

in my case doesn't work. The field result empty even if there is some value.

[petermikitsh]

@jonathanasquier Your onBlur hack worked in my case. Thanks for commenting.

[MilllerTime]

There is another issue specific to handling onBlur: https://github.com/JedWatson/react-select/issues/805

@jonathanasquier's trick works well if you're not using redux-form, but if you are, that approach won't notify redux-form that the field was blurred since it's overriding the onBlur handler from field (or input for v6). If you look at the actions dispatched, the blur action never happens.

You can manually trigger the redux-form onBlur, and pass it the current Select value so that it is preserved. It's the same hack, but properly integrated with redux-form:

<Select
  options={options}
  // redux-form wiring
  {...input}
  onBlur={() => input.onBlur(input.value)}
/>

[keehun]

I might have a similar, but different, problem, if anyone is able to take a look: https://github.com/JedWatson/react-select/issues/1817

Thank you!

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples