1

I am using some code with fields that are "required", the confirm button will not activate while they are empty. When someone else types something in the field while running it on their computer the button activates as intended, but if I do it on my computer the button does not activate, the field is still considered empty.

We are running the same code from the same branch of Github and all our dependencies are on the same version. This code is a small part of it, this error happens on all screens only on my end.

const {
    control,
    formState: { isValid, isDirty, errors },
    handleSubmit,
    reset,
    register,
    setError,
  } = useForm();

const onSubmit = async form =>
    mutation.mutate({
      ...form,
      id: state.data.id,
      esn: Number(form.esn),
    });

<Controller
        render={({ field: { onChange, value } }) => (
          <Select
            defaultValue={value}
            title={language.trackerModelId}
            setValue={onChange}
            placeholder={language.trackerModelIdPlaceholder}
            options={trackerModelData}
            filterable
          />
        )}
        name="trackerModelId"
        control={control}
        rules={{ required: true }}
      />
      <Input
        title={language.esn}
        name="esn"
        register={register}
        error={errors.esn?.message}
        onChange={handleValidateESN}
        required
        upperCase
      />

Edit: If I use { mode: 'onChange' } inside the useForm then it will work correctly, but it can't be a permanent solution due to it being a code to fix a problem that only happens on my computer.

TurtleTail
  • 163
  • 6
  • 1
    Did you try debugging? – Konrad Jan 05 '23 at 14:29
  • Have you considered why it's only your computer that has this issue? What operating system do you use vs what do others use? What browser are you using? What versions for each? – Henry Woody Jan 05 '23 at 19:07
  • Also I recommend you do not follow this approach of disabling the submit button while the form has validation errors. Users can get stuck because they can't see which fields are invalid and there's no clear action to take that will highlight the invalid field(s). You can instead maybe apply a style to the submit button to highlight it when all fields are valid, but don't disable it. – Henry Woody Jan 05 '23 at 19:09
  • React does not have any form logic built in, so at the very least the problem is how you're using `useForm`: did you read through one (or more) tutorials that explain how to properly use that? https://react-hook-form.com/api/useform/ looks like it has quite a lot of examples for you to reference. – Mike 'Pomax' Kamermans Jan 05 '23 at 19:15
  • @HenryWoody everything we use is standard for everyone, there is no browser difference or anything like that and I triple checked the versions on everything. – TurtleTail Jan 05 '23 at 19:46
  • @HenryWoody it does have a hint of what is wrong, it sets an error under the field – TurtleTail Jan 05 '23 at 19:46
  • The error is there the whole time? Even before they've clicked into the field? – Henry Woody Jan 05 '23 at 19:50

0 Answers0