Sharlaan / material-ui-superselectfield

multiselection autocomplete dropdown component for Material-UI
https://sharlaan.github.io/material-ui-superselectfield
MIT License
266 stars 92 forks source link

Error "Cannot read property 'some' of null" in multiple mode #135

Closed TarikHuber closed 6 years ago

TarikHuber commented 6 years ago

Hi @Sharlaan ,

Just to forward a issue I got over React Most Wanted.

First I was thinking that the issue was in our implementation of SuperSelectField to ReduxForm but it seems that it is a SuperSelectField issue. When using the multiple mode we get the error message: "Cannot read property 'some' of null" in this part of the code

    _this.handleMenuSelection = function (selectedItem) {
      return function (event) {
        event.preventDefault();
        var selectedItems = _this.state.selectedItems;

        if (_this.props.multiple) {
          var selectedItemExists = selectedItems.some(function (obj) {
            return areEqual(obj.value, selectedItem.value);
          });

It seems that selectedItems are null.

To be sure that the error is not form our implementation to ReduxForm I copied the example from "example2" into our code and the same error appears.

If I find time I will take a look on it myself but if you have it would be great to fix thiss issue. It seems like a issue that could affect everyone who is using the multiple mode.

Sharlaan commented 6 years ago

I think the error might come from :

componentWillReceiveProps (nextProps) {
    if (!areEqual(nextProps.value, this.state.selectedItems)) {
      this.setState({ selectedItems: nextProps.value })
    }

... and here the proptype definition for value:
const checkFormat = (value) => value.findIndex((v) => typeof v !== 'object' || !('value' in v))

value: (props, propName, componentName, location, propFullName) => {
    const { multiple, value } = props
    if (multiple) {
      const index = checkFormat(value)
      if (!Array.isArray(value)) {
        return new Error(`
          When using 'multiple' mode, 'value' of '${componentName} ${props.name}' must be an array.
          Validation failed.`)
      } else if (index !== -1) {
        return new Error(`
          'value[${index}]' of '${componentName} ${props.name}' must be an object including a 'value' property.
          Validation failed.`)
      }

so if value is set to wrong type (Array when multiple, primitive if not multiple), the above proptype snippet should throw an explicit error if value is set to null/undefined for any reason.

Can you give an example to repoduce this issue please, as my examples don't throw ?

TarikHuber commented 6 years ago

Hi,

Just change the SSF in this file to multiple.

Even if you don't use the ReduxForm wrapper it happens.

Sharlaan commented 6 years ago

Ok i reproduced the issue and found out that my initial guess were correct:

Sharlaan commented 6 years ago

Hi, Can you try with v1.8.9 : it should spit an error about invalid value prop ?

Sharlaan commented 6 years ago

closing since no report