[Multi select] onChange returns null when no values instead of []

[nicolasletoublon]

All is in the title. We implemented a version of the Multi select. and it seems that when you clear the last value (or the only one) of the field, the onChange returns you null. I would clearly expect an empty array at this stage :)

Here is your sandbox updated with the onChange callback :)
https://5jtqt.codesandbox.io/

Thanks for looking at it!

[ragesoss]

This appears to be the intended behavor with v3: #3416

I just ran into a bug in my app because of this change as well. Curious as to how others handle it.

[speir-wang]

And interestingly, if user uses the clear all button to remove all the values in Multi select, the value would be set to an empty array.

I was wondering why removing the last value results in null but clicking clear all button results in []? Shouldn't they be treated in the same manner?

[someden]

Simple example:

import React from 'react';
import Select from 'react-select';

export default () => (
  <Select
    isMulti
    options={[{ value: 'ocean', label: 'Ocean' }, { value: 'blue', label: 'Blue' }]}
    onChange={console.log}
  />
);

[someden]

Temporary workaround for this bug:

import React, { Component } from 'react';
import ReactSelect from 'react-select';

class Select extends Component {
  defaultProps = {
    onChange: () => {},
  };

  handleChange = selected =>
    this.props.onChange(!selected && this.props.isMulti ? [] : selected);

  render() {
    return <ReactSelect {...this.props} onChange={this.handleChange} />;
  }
};

export default Select;

[stearruda]

I was having some problems with that as well and to fix it I've redefined the value on the onChange to an empty array.

const MultiSelect = () => {
  const handleOnChange = value => {
    if (value === null) {
      value = [];
    }
  };

  return (
    <Select
      isSearchable
      isMulti
      onChange={handleOnChange}
    />
  );
}

export default MultiSelect;

[TravnikovDev]

I am still having the same Issue

[luksari]

I was having the very same problem, needed to use onChange from redux-form in my component so, this is workaround for redux-form and typescript

const handleOnChange = (value: ValueType<SelectableItem>, action: ActionMeta) => {
   if (!onChange) return;
   if (value === null) {
     onChange([], action);
   } else {
     onChange(value, action);
   }
 };
<ReactSelect
     onChange={handleOnChange} ... />

[danielimmke]

Super simple inline fix for people Googling:

onChange={(value) => stateChangeMethod(value || [])}

Replace stateChangeMethod with whatever you're using to update state. In my case I was using Hooks so I had a specific function just for that bit of state.

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major 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 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!

[rusakovic]

@bladey Hello.

Thank you. But issue is still here.
If you remove value from input dropdown field by pressing backspace, returned value will be null but not []
react-select 3.1.0

[akhilaudable]

+1