Problem with multiple select when onChange event we update a state

Description

I have a problem with multiple select when onChange event we update a state. handleFilterChange is called but the dropdown is automatically closing. that I don’t want.

Steps to Reproduce

const [filterType, setFilterType] = useState<string[]>([]);

const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        let arr = [];
        for (let i = 0; i < e.target.selectedOptions.length; i++) {
            arr.push(e.target.selectedOptions[i].value);
        }
        setFilterType(arr);
    }

<Select
                                    label="filters"
                                    onChange={e => handleFilterChange(e)}
                                    id="filter"
                                    icon={<Icon>filters</Icon>}
                                    s={12}
                                    m={6}
                                    multiple
                                    options={{
                                        classes: 'browser-default',
                                        dropdownOptions: {
                                            alignment: 'left',
                                            autoTrigger: true,
                                            closeOnClick: false,
                                            constrainWidth: true,
                                            coverTrigger: true,
                                            hover: false,
                                            inDuration: 150,
                                            outDuration: 250
                                        }
                                    }}
                                    value={}
                                >
                                    <option disabled value="">Choose your option</option>
                                    <option value="1">Choose your option</option>
                                    <option value="2">Choose your option</option>
                                </Select>

Expected behavior: [What you expect to happen]

the dropdown should not close.

Actual behavior: [What actually happens]

Versions

“react-materialize”: “^3.9.3”, “react”: “^16.10.2”, “materialize-css”: “^1.0.0-rc.2”,

[alextrastero]

As you said this is an issue with materializecss. When calling set state, the component is rerendered and the select is created again, therefor returning to its original closed state. If Select had a open prop that we could then pass to materializejs this could be solved… but it doesn’t.

A workaround could be to only set state when the select is closed… maybe

const [filterType, setFilterType] = useState();

  const handleFilterClosed = (e) => {
    setFilterType(e.value.split(","));
  };

  return (
    <Select
      label="filters"
      // onChange={(e) => handleFilterChange(e)}
      id="filter"
      s={12}
      m={6}
      multiple
      options={{
        classes: "browser-default",
        dropdownOptions: {
          alignment: "left",
          autoTrigger: true,
          closeOnClick: false,
          constrainWidth: true,
          coverTrigger: true,
          hover: false,
          inDuration: 150,
          outDuration: 250,
          onCloseEnd: handleFilterClosed, // <- handle here
        }
      }}>
      <option disabled value="">Choose your option</option>
      <option value="1">Choose your option</option>
      <option value="2">Choose your option</option>
    </Select>
  );

[Tchekda]

I am having this problem too! Was anyone able to find a workaround? @cstavroudis

I had to switch for something else until the issue is fixed… multiselect-react-dropdown does the job pretty well and has a better integration in React than react-materialize.