Error validation with Material UI Autcomplete & React hook form

Question

I'm building a form using Material UI and using react hook form for validation. It works perfectly using react hook form's Controller component except for Autocomplete. While it captures the Autocomplete data, the error handling doesn't work. I'm assuming it's because while the error object is passed down from the Controller => Autocomplete, it isn't passed down to the nested TextField component. It doesn't work if I do the error validation on the Autocomplete component instead either. Anyone has solved this? My component code is below

<Controller
                            name="categories"
                            control={control}
                            defaultValue=''                            
                            render={(props) => 
                                <Autocomplete
                                    className='formInputs'
                                    options={categories}
                                    renderInput={params => 
                                        <TextField
                                            name='autoCompleteTextField'
                                            {...params}
                                            // value={props.field.value}
                                            label="What do you do?"
                                            variant="outlined"
                                            rules={{
                                                required: {
                                                    value: true,
                                                    message: "Please tell us what you're an expert on. It helps us prioritize your referrals"
                                                }
                                            }}
                                            error={Boolean(props.fieldState.error)}
                                            onChange={(e, data) => props.field.onChange(data)}
                                            {...props}
                                        />
                                    }
                                />
                            }
                        />

Which react-hook-form & MUI version are you using?

NearHuscarl
– NearHuscarl

2021-09-23 07:54:05 +00:00
Commented Sep 23, 2021 at 7:54 — NearHuscarl
– NearHuscarl, Commented Sep 23, 2021 at 7:54

NearHuscarl · Accepted Answer · 2021-09-23 09:55:30Z

You're supposed to spread the props of the render callback to the Autocomplete component, not the TextField. Have a look at the official example. Also, the rules props should be put in the Controller component.

<Controller
  name="country"
  control={control}
  rules={{
    required: "Please enter something"
  }}

In order to display the error message from react-hook-form, you need to set the helperText prop of the TextField

renderInput={(params) => (
  <TextField
    {...params}
    label="Choose a country"
    variant="outlined"
    error={!!fieldState.error}
    helperText={fieldState.error?.message}
  />
)}

Full example

<Controller
  name="country"
  control={control}
  rules={{
    required: "Please enter something"
  }}
  render={({ field, fieldState }) => {
    return (
      <Autocomplete
        {...field}
        options={countries}
        getOptionLabel={(option) => option.label}
        renderOption={(option) => (
          <span>
            {countryToFlag(option.code)}
            {option.label}
          </span>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Choose a country"
            variant="outlined"
            error={!!fieldState.error}
            helperText={fieldState.error?.message}
          />
        )}
        onChange={(_, data) => field.onChange(data)}
      />
    );
  }}
/>

CrsCaballero · Accepted Answer · 2023-03-01 20:12:45Z

0

You have made two mistakes

As @NearHuscarl has said, you should spread props in the <Autocomplete /> component, not in the <TextField />
Either way if you want to spread props into <TextField />, you should do it at the beginning, the other way {...props} is going to replace the other props that you have defined above the spread

answered Mar 1, 2023 at 20:12

CrsCaballero

2,3581 gold badge28 silver badges34 bronze badges

Collectives™ on Stack Overflow

Error validation with Material UI Autcomplete & React hook form

2 Answers 2

Full example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Full example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related