Material ui multiple Select

Question

this is my code : Code Sandbox

when I select an item from Select component; the value of

event.target.value

is undefined !!

What is proper implementation?

Answer 1

You need to pass a value prop to MenuItem

Please refer below code

  <TextField
    classes={{ root: classes.root }}
    select
    name="userRoles"
    id="userRoles"
    variant="outlined"
    label="userRoles"
    SelectProps={{
      multiple: true,
      value: formState.userRoles,
      onChange: handleFieldChange
    }}
  >
    <MenuItem value="admin">Admin</MenuItem>
    <MenuItem value="user1">User1</MenuItem>
    <MenuItem value="user2">User2</MenuItem>
  </TextField>

Please refer to this sandbox for example

Answer 2

As you can see in documentation of Multiple Select in MUI you have to iterate over each option and check if it is selected.

const handleChangeMultiple = event => {
    const { options } = event.target;
    const value = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    console.log(value); // selected options
};

Answer 3

You need to pass value for each option.

<MenuItem value="Admin">Admin</MenuItem>
<MenuItem value="User1">User1</MenuItem>
<MenuItem value="User2">User2</MenuItem>