Error validation with Material UI Autcomplete & React hook form

user_3132422 0
Viewed 3518

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}
                                        />
                                    }
                                />
                            }
                        />
react-hook-form material-ui reactjs
1 Answers

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

Codesandbox Demo

user_94494260
Related