CODEWITHSUNDEEP
javascriptreactjsautocompletematerial-ui
DevLoverUmar
DevLoverUmar

Reputation: 13923

Multiple selected values of React material-ui Autocomplete?

I'm using Material-ui Autocomplete in multiple selection mode. I want to get all the selected values on form submission. As per this Stackoverflow thread, we can get individual value on onChange event handler, but I want a simplified solution of getting all selected values on form-submission. Here is the mark-up of Autocomplete

<Autocomplete
  multiple
  id="checkboxes-tags-demo"
  options={devicesAndGroups}
  disableCloseOnSelect
  getOptionLabel={(option: any) => option.name}
  renderOption={(option, { selected }) => (
    <React.Fragment>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.name}
    </React.Fragment>
  )}
  style={{ width: "100%" }}
  renderInput={(params) => (
    <TextField
      {...params}
      name="selectedDevices"
      variant="outlined"
      label="Devices/Groups"
      placeholder="Devices"
    />
  )}
/>;

Is there any attribute of Autocomplete, to get all the selected values at any time?

Upvotes: 1

Views: 1805

Answers (1)

DevLoverUmar
DevLoverUmar

Reputation: 13923

I'm using Redux-toolkit for state management, and solved the issue by pushing select deselect of each single option in the Redux store.

const onSelectionChanged = (...params: any) => {
    const changedOption = params[3].option;
    const selectionType = params[2];  // selected/deselected ... in case of selection, it's === "select-option" 
    dispatch<any>(
      devicesThunkActions.selectDeselect({ changedOption, selectionType })
    );    
};

.
.
.
    onChange={onSelectionChanged}
    renderInput={(params) => (
          <TextField
            {...params}
            name="selectedDevices"
            variant="outlined"
            label="Devices/Groups"
            placeholder="Devices"
            className={classes.customPadding}
          />
      )}

Upvotes: 1

Related Questions