React - Material-UI - How to use Select with multiple values inside react-hook-form

Question

I am trying to use UI-Material Select with multiple options inside react-hook-form without success.

I had this working before trying to do it with multiple options

            <form onSubmit={handleSubmit(onSubmit)}>
                <Row className="mb-2">
                    <Col sm={6}>
                        <FormControl className="select-language">
                            <InputLabel> {t('Languages')}</InputLabel>
                            <Controller
                                as={
                                    <Select>
                                        {Config.languages.map(m => <MenuItem key={m.code} value={m.text}> {t(m.text)} </MenuItem>)}
                                    </Select>
                                }
                                defaultValue={user.language}
                                name="language"
                                control={control}
                            >
                            </Controller>

                        </FormControl>

                    </Col>
                </Row>
         </form>

I tried to add multiple to the Select element which lead me to another error.

I tried also to keep only the Select element without the Controller wrapper, but then I can't get the language value in onSubmit

Very simple codeSandBox that shows that I can't get value from Select when submitting the form: https://codesandbox.io/s/react-hook-form-example-s7h5p?file=/src/index.js

I would appreciate any help Thanks

Answer 1

If anyone looking for a easy solution, this might come in handy. Multiple select options become very easy now with Select Component. If you look at the Select component, you just have to set the default value to an array and pass the "multiple" prop.

import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select
} from "@mui/material";
import { Controller, useForm } from "react-hook-form";

const FCWidth = {
  width: "20rem"
};

export default function App() {
  const { control, handleSubmit } = useForm();
  const formSubmitHandler = (formData) => {
    console.log(formData);
  };

  const ages = ["10", "20", "30"];

  return (
    <div className="App">
      <form onSubmit={handleSubmit(formSubmitHandler)}>
        <Controller
          name="age"
          control={control}
          type="text"
          defaultValue={[]}
          render={({ field }) => (
            <FormControl sx={FCWidth}>
              <InputLabel id="age">Age</InputLabel>
              <Select
                {...field}
                labelId="age"
                label="age"
                multiple
                defaultValue={[]}
              >
                {ages.map((age) => (
                  <MenuItem value={age} key={age}>
                    {age}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}
        />
        <FormControl sx={FCWidth}>
          <Button
            type="submit"
            variant="contained"
            fullWidth
            sx={{ marginTop: ".75rem", fontWeight: "bold" }}
          >
            Submit
          </Button>
        </FormControl>
      </form>
    </div>
  );
}

Here is the code sandbox link https://codesandbox.io/s/select-multiple-option-with-mui-and-react-hook-form-2kv2o