Cannot Clear selection using provided 'clear' Button

‘react-select’: version “2.0.0”

JSX:

          <FormSelect
            isClearable={this.state.cohort_report_cohort !== null}
            isSearchable={false}
            onChange={option =>
              this.updateValue('cohort_report_cohort', option.value)
            }
            defaultValue={this.state.cohort_report_cohort}
            options={this.props.cohort_options}
            placeholder="Select Cohort..."
          />

Example:

Any advice would be appreciated.

[noreek]

option variable is NULL in case of clearing (in provided example inside onChange). So passing option.value to updateValue method fails - check your console for error.

To fix it: this.updateValue('cohort_report_cohort', option ? option.value : null);

[cutterbl]

One, shouldn’t your isClearable just be there? it won’t show the ‘x’ if there’s no value in the field. Second, what does your updateValue method look like? And onChange method signature also provides an action that you can key off of for specific types of changes.

onChange={(option, {action}) => this.doSomething(option, action)}