I am getting this error while using multiselect with final-form.

Dropdown value must be an array when multiple is set. Received type: [object String]

here is my code:

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />

any update?

I am getting this error while using multiselect with final-form.

Dropdown value must be an array when multiple is set. Received type: [object String]

here is my code:

https://codesandbox.io/s/cool-torvalds-lhe9d

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />

any update?

• javascript
• reactjs
• semantic-ui-react
• react-final-form

Share Improve this question Follow edited Sep 6, 2019 at 12:17 Lazar Nikolic 4,40411 gold badge2626 silver badges4646 bronze badges asked Aug 25, 2019 at 6:39 user944513user944513 12.8k5252 gold badges185185 silver badges348348 bronze badges 4

• Code in sandbox works well.. – Pavindu Commented Aug 25, 2019 at 6:48
• see console..and check error – user944513 Commented Aug 25, 2019 at 6:51
• Error went away when defaultValue={[]} is replaced with value={[]} in example.js file. See if that works for you.. – Pavindu Commented Aug 25, 2019 at 6:57
• then user not able to select value ..:( – user944513 Commented Aug 25, 2019 at 7:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to remove defaultValue prop and pass value prop as [] if value is not available to Dropdown ponent.

const SingleSelectAutoComplete = props => {
  const renderError = ({ error, touched }, id) => {
    if (touched && error) {
      return <div id={id}>{error}</div>;
    }
  };
  const {
    input,
    label,
    onSearchChange,
    data,
    meta,
    required,
    onChange,
    helloWorld
  } = props;
  console.log("***********************");
  let { value, ...restProps } = props.input;
  const id = input.name;
  return (
    <div
      className={`field ${meta.error && meta.touched ? " error" : ""} ${
        required ? " required" : ""
      }`}
    >
      <label>{label}</label>
      <Dropdown
        {...restProps}
        value={value || []}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        placeholder="Select values"
      />
      {renderError(meta, `${id}-error-text`)}
    </div>
  );
};