React Hook Form V7 - Material UI 5 Autocomplete: Lazy loaded values not validated

Question

I use react-hook-form V7 with an Material UI 5 Autocomplete input. My lazy loaded values in the Autocomplete are not validated on first submit click (but on second). What's wrong?


  useEffect(() => {
    setItemList([
      { id: 1, name: "item1" },
      { id: 2, name: "item2" }
    ]);
    setItemIdSelected(2);
  }, []);

  [...]

  <Autocomplete
    options={itemList}
    getOptionLabel={(item) => (item.name ? item.name : "")}
    getOptionSelected={(option, value) =>
      value === undefined || value === "" || option.id === value.id
    }
    value={
      itemIdSelected
        ? itemList.find((item) => item.id === itemIdSelected)
        : ""
    }
    onChange={(event, items) => {
      if (items !== null) {
        setItemIdSelected(items.id);
      }
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        {...itemsIdFormHookRest}
        label="items"
        margin="normal"
        variant="outlined"
        inputRef={itemsIdFormHookRef}
        error={errors.itemsId ? true : false}
        helperText={errors.itemsId && "item required"}
        required
      />
    )}
  />
  
[...]

Please have a look to the code on code sandbox:

knoefel · Accepted Answer · 2021-04-17 18:12:07Z

8

You should wrap the Material UI Autocomplete with the Controller Component provided by React Hook Form. See this section in the documentation for further information.

I would also suggest to remove the useState saving the id, as you could also access the value via React Hook Form either through getValues or after the handleSubmit callback is called.

Here is the updated CodeSandbox.

answered Apr 17, 2021 at 18:12

knoefel

7,0383 gold badges39 silver badges53 bronze badges

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

Comments

MadikMayCry · Accepted Answer · 2021-09-02 10:50:59Z

0

How can i implement datepickers? This works only with modal, but when typing yourself is not working.

<LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
  <Controller
    render={({ field }) => (
      <DatePicker
        value={field.value}
        onChange={(value) => field.onChange(value)}
        renderInput={(params) => (
          <TextField {...params} />
        )}
      />
    )}
    name={name}
    control={control}
  />
</LocalizationProvider>

answered Sep 2, 2021 at 10:50

MadikMayCry

91 bronze badge

Comments

mohammad barzegar · Accepted Answer · 2022-09-07 10:36:25Z

I handle react-hook-form with mui Autocomplete in the following way

"devDependencies": {
    "@mui/material": "^5.8.3",
    "react-hook-form": "^7.33.1",
}

const Country = [{ label: 'United Kingdem', value: 'uk' }];

<Controller
    name={"country"}
    control={control}
    rules={{
        required: true,
    }}
    render={({ field: { onChange, ..._field } }) => (
        <Autocomplete
            options={Country}
            onChange={(_, data) => onChange(data.value)}
            renderInput={(params) => {
                return (
                    <TextField
                        {...params}
                        label="disableCloseOnSelect"
                        variant="standard"
                    />
                );
            }}
            {..._field}
        />
    )}
/>

Collectives™ on Stack Overflow

React Hook Form V7 - Material UI 5 Autocomplete: Lazy loaded values not validated

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related