React-select: Multivalue - Removing all selected items send null on onChange

[bbougon]

Hello,

found on version 3.1.0 (didn't try below, except on the one given in the default sandbox and is not reproducible).
When removing all the selected options from a multivalue select, an error is raised (eg: Cannot read property 'map' of null) when you want to use array methods on event received on onChange property

prerequisites:

• have version 3.1.0
• isMulti props on
• onChange props used, use map method on event received

sandbox: https://codesandbox.io/s/react-codesandboxer-example-tvb2l

scenario:

• have a multivalue select with many removable options
• select some options
• remove all selected options

actual result:
exception thrown =>
TypeError
Cannot read property 'map' of null

expected result:
event received is an empty array

[cmarabate]

I troubleshooted it for you in codesandbox and can confirm that this wasn't an issue until version 3.0. On versions 2.4.4 and lower, this was not an issue.

With all the other dependencies updated to their latest stable versions...

• It completely breaks after updating it to version 3.0.0
• It partially starts working again after 3.0.2. but if you select an option and then unselect it, it returns the following error...
  -- TypeError: Cannot read property 'length' of null
  Object.Filter._this.handleChange [as onChange]
  /src/components/filter.js:55:23
  -- This issue is never resolved in any of the more recent versions

Hopefully that helps you get to the bottom of the issue so you can fix it for us and we can stop using an old version of react-select.

Here is the link to the codesandbox with all the dependencies updated to their latest versions including react-select so you can see for yourself the error that triggers after selecting an option and then unselecting it...

https://codesandbox.io/s/react-select-issue-4021-lfysf

You can fork it and test it with the versions I mentioned above to confirm everything.

Here is a link to my working version that still uses react-select 2.4.4...
https://codesandbox.io/s/react-select-filter-76961?file=/src/index.js

[ebonow]

Greetings everyone.

This is expected behavior per the upgrade notes to V3 https://github.com/JedWatson/react-select/issues/3585

(Taken from the above link)

Normalized Values

At the moment, if no value is specified by the consumer, it's instantiated as a null value, regardless of whether the select isMulti or not.

When isMulti is false this is fine. On selection of an option, the value becomes an object, and on clearing of said value, it returns to being null. (null --> {} --> null)

However when isMulti is true, this becomes more inconsistent. On selection of options, the value becomes an array of options, removing values extricates them from this array, removing the last selected value results in an empty array, instead of the initial base state of null.
(null --> [{}] --> [])

We rectify this in 3.0.0, on removal of all selected values in an isMulti Select, the value passed to onChange is null and not [].

This is both related and also the exact opposite behavior of another known issue that exists that has the value returned as [] when remove-item is called on the last item.
https://github.com/JedWatson/react-select/issues/4247

I will be closing this ticket out, and welcome any questions or concerns if there are any

[htulipe]

Thanks for the detailed answer