React Formik Multi Select dropdown disabling all options when value array updates

Question

I am new to react and trying to create a multiple select dropdown using react and formik using ant-design. It currently populates with all the correct data (disabled/enabled select options) on initial load, however, when I update the array of data for enabling other options it disables every option. When I console log the data the array updates correctly, but I can't figure out why all the options are being disabled. Any help would be greatly appreciated.

Here is the snippet of data that populates the array of options that should be enabled:

   const data = values.NPTRates.filter((rate) => {
    if (rate.NonProductiveTimeTypeId === 24) {
      return rate.DivisionId;
    }
    return null;
  });

The MultiSelect Component Element populating the data:

                  <DivisionMultiSelect
                    name="Divisions"
                    value={values.Divisions}
                    multiSelect={data}
                    onChange={(val) => {
                      setFieldValue('Divisions', val);
                    }}
                  />

and the actual component rendering the dropdown:

render() {
return (
  <Select
    value={this.props.value}
    name={this.props.name}
    className={this.props.cssClass}
    disabled={this.props.disabled}
    onChange={this.props.onChange}
    mode="multiple"
    showSearch
    filterOption={(input, option) => option.props.children.toLowerCase()
      .indexOf(input.toLowerCase()) >= 0}
    size="large"
  >
    {
      this.state.data.map(opt => (
        <Option
          disabled={this.props.multiSelect.find(data => data.DivisionId !== opt.Id)}
          key={opt.Id}
          value={opt.Id}
        >
          {opt.Name}
        </Option>
      ))
    }
  </Select>
);

} }

Can you add a minimal reproducable example at Stackblitz or codepen? — zerocewl

Matt Hauber Matt Hauber · Accepted Answer · 2020-08-05T22:27:18

I was able to fix the issue by using the filter method over the find.

              disabled={this.props.multiSelect
            .filter(data => data.DivisionId === opt.Id).length === 0
            || this.props.multiSelect.length === 0}

React Formik Multi Select dropdown disabling all options when value array updates

1 Answers