Multiple selected values of React Material UI Autocomplete?

Question

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?

Facing the same issue. How did you resolve?

Jay J
– Jay J

2021-01-07 20:37:30 +00:00
Commented Jan 7, 2021 at 20:37 — Jay J
– Jay J, Commented Jan 7, 2021 at 20:37
I posted an answer.

DevLoverUmar
– DevLoverUmar

2021-01-08 10:07:44 +00:00
Commented Jan 8, 2021 at 10:07 — DevLoverUmar
– DevLoverUmar, Commented Jan 8, 2021 at 10:07

DevLoverUmar · Accepted Answer · 2021-01-08 10:07:21Z

1

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}
          />
      )}

answered Jan 8, 2021 at 10:07

DevLoverUmar

14.3k16 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple selected values of React Material UI Autocomplete?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related