Undefined values when using asyncOptions #201
Description
First off, your component seems great. However, I did quickly run into the following issue.
The error only seems to occur when using the asyncOptions. I tried the regular [Options] and everything worked.
It looks like the values are null and this.state.values are never set, but checked in the filterOptions function. Even when passing in values thru the props, there may need to be a this.setState(... for values. The offending lines are on Select.js on starting on line 507.
filterOptions: function(options, values) {
if (!this.props.searchable) {
return options;
}
var filterValue = this._optionsFilterString;
var exclude = (values || this.state.values).map(function(i) {
return i.value;
});
...The exclude function blows up when both values and this.state.values are null or undefined. It gets called on ComponentDidMount, and that is fine, but then again when loadAsync, which causes the failure.
I was able to work around the issue by extending Select component like so, but thought you may want to address the root issue.
class SelectEx extends Select {
constructor(props) {
super(props);
this.state.values = [];
}
}Lastly, I also noticed a couple of spots where you are pointing to how values should be populated.
getInitialState: function() {
return {
/*
* set by getStateFromValue on componentWillMount:
* - value
* - values
* - filteredOptions
* - inputValue
* - placeholder
* - focusedOption
*/
options: this.props.options,
isFocused: false,
isOpen: false,
isLoading: false
};
},
getStateFromValue: function(value, options) {
if (!options) {
options = this.state.options;
}
// reset internal filter string
this._optionsFilterString = '';
var values = this.initValuesArray(value, options),
filteredOptions = this.filterOptions(options, values);
return {
value: values.map(function(v) { return v.value; }).join(this.props.delimiter),
values: values,
inputValue: '',
filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : this.props.placeholder,
focusedOption: !this.props.multi && values.length ? values[0] : filteredOptions[0]
};
},Like I said, the code assumes values will be set downstream, but it is not.
Hope that helps, glad to provide further feedback if it helps.