Why required check not working after removing element?

Question

Could you please tell why my required check is not working in autocomplete .I am using material UI with react hook form. Step to reproduce

Click Submit button it show field is required.
then select any element from list.
remove the selected element Then click again submit button.It should show “required” field check.but it is not showing anything why ??

Here is my code https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq

 <Controller
      as={
        <Autocomplete
          id="country-select-demo"
          multiple
          style={{ width: 300 }}
          options={countries}
          classes={{
            option: classes.option
          }}
          autoHighlight
          getOptionLabel={option => option.label}
          renderOption={(option, { selected }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.label} ({option.code}) +{option.phone}
            </React.Fragment>
          )}
          renderInput={params => (
            <TextField
              {...params}
              label="Choose a country"
              variant="outlined"
              fullWidth
              name="country"
              inputRef={register({ required: true })}
              //  required
              error={errors["country"] ? true : false}
              inputProps={{
                ...params.inputProps,
                autoComplete: "disabled" // disable autocomplete and autofill
              }}
            />
          )}
        />
      }
      onChange={([event, data]) => {
        return data;
      }}
      name="country"
      control={control}
    />

score 2 · Accepted Answer · answered Feb 10 '20 at 00:51

2

When the form loads initially, the value of your form is an empty object -

{}

When you select a country (say, 'Andorra') the value of your form becomes:

{"country":[{"code":"AD","label":"Andorra","phone":"376"}]}

And then when you deselect the country, the value of your form becomes:

{"country":[]}

An empty array technically meets the "required" criteria (it's not null, after all) so your required handler doesn't fire.

You can verify this is happening by showing the value of the form in your App class -

const { control, handleSubmit, errors, register, getValues } = useForm({});
return (
  <form noValidate onSubmit={handleSubmit(data => console.log(data))}>
    <Countries control={control} errors={errors} register={register} />
    <Button variant="contained" color="primary" type="submit">
      Submit
    </Button>
    <code>{JSON.stringify(getValues())}</code>
  </form>
);

The simple fix is to NOT return an empty array as a value from your control - update your onChange handler as follows -

onChange={([event, data]) => {
    return data && data.length ? data : undefined;
}}

answered Feb 10 '20 at 00:51

gerrod

6,119
6
33
45

Thanks working fine ..https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq – user944513 Feb 10 '20 at 01:42
but i have one issue cooming https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq – user944513 Feb 10 '20 at 01:42
`Material-UI: A component is changing an uncontrolled useAutocomplete to be controlled.` – user944513 Feb 10 '20 at 01:43
whenever i select it show me this error https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq – user944513 Feb 10 '20 at 01:43
I alreay defined `initial state` or defalut state – user944513 Feb 10 '20 at 01:46
That's because of this - https://stackoverflow.com/a/53072573/127497 - you'd have to change the defaultValues to `country: []` - but then it breaks your `required` validator. I think you'll probably have to use a custom validation function here instead. – gerrod Feb 10 '20 at 03:21
do you have any how ?? – user944513 Feb 10 '20 at 03:48
do you know any custom validator function know – user944513 Feb 10 '20 at 03:49
it would be great if you help me in codesandbox ..my latest sandbox https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-0wvpq – user944513 Feb 10 '20 at 03:57
I've never used Material or React Hook Form but it seems pretty straight-forward? https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-hyqwv – gerrod Feb 10 '20 at 04:04
after `empty array` it works but stop `required validation` – user944513 Feb 10 '20 at 04:09
Did you try the code sandbox I sent through? I removed the `required` validator and added in a custom validator instead - the form is invalid if there are no countries selected, which I figured was the main objective here? – gerrod Feb 10 '20 at 09:52
where you sent ?? – user944513 Feb 12 '20 at 00:30
can you share the link – user944513 Feb 12 '20 at 00:31
It's in my comment above - codesandbox.io/s/mui-autocomplete-with-react-hook-form-hyqwv – gerrod Feb 12 '20 at 04:22

Why required check not working after removing element?

1 Answers1