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

Usage with redux forms: Value error on multiple selection #185

Open saranshbansal opened 5 years ago

saranshbansal commented 5 years ago

I was able to make it work with redux form. However, there is one problem. As you mentioned: if multiple is set, value must be at least an empty Array.

I'm not able to achieve it. The value and onSelect are handled by redux-forms. The defaults for value is null. When I run my example, I get the error saying that value must be an array.

console.js?32ad:35 Warning: Failed prop type: 
          When using 'multiple' mode, 'value' of 'SelectField undefined' must be an array.
    in SelectField (created by AutoCompleteFormField)
    in AutoCompleteFormField (created by AccountHolderSelectFormField)
    in div (created by AccountHolderSelectFormField)
    in AccountHolderSelectFormField (created by Connect(AccountHolderSelectFormField))
    in Connect(AccountHolderSelectFormField) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by BookingsExportFilterForm)
    in form (created by BookingsExportFilterForm)
    in div (created by DialogInline)
    in div (created by Paper)
    in Paper (created by DialogInline)
    in div (created by TransitionItem)
    in TransitionItem (created by TransitionGroup)
    in div (created by TransitionGroup)
    in TransitionGroup (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

I tried setting default value to an empty array and the error disappeared. However, the dropdown is not loading at all now. How do I fix it?

Why do you specifically need it as an array if multiple prop is set?

I'm posting one of the Field with a custom component that I'm currently using.

      <Field
        name="recipients"
        value={normalizeMultipleSelectValues} // here I pass empty array if value is null/undefined
        component={AccountHolderSelectFormField}
        floatingLabel="Mail To:"
        fullWidth
        multiple
        withResetSelectAllButtons
      />