Touched behaviour of checkboxes

[maurer2]

Hello, I noticed that when toggling a checkbox in a browser on MacOS the "touched" flag doesn't seem to change. This issue was previously reported for Safari here #2084, but it seems to be happening for others browsers on MacOS as well now. According to this issue whatwg/html#4356 the blur event used to work correctly in Firefox on MacOs for checkboxes, but that seems to have changed.
I wonder if there is a good way to still set the touched flag when toggling a checkbox?

Thanks

Test repo: https://github.com/maurer2/rhf-output-schema

Simplified form markup

export default function FormFields() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
  } = useForm{
    defaultValues: {
      name: "Name1 Name2",
      age: "50",
      isActive: true,
    },
  });

  const onSubmit  = (data) => {
    console.log(data);
  };

  return (
    <>
      <form
        className="form"
        name="test form"
        aria-label="test form"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="field">
          <label htmlFor="name">Name</label>
          <input {...register("name")} id="name" />
          <ErrorMessage errors={errors} name="name" />
        </div>

        <div className="field">
          <label htmlFor="age">Age</label>
          <input {...register("age")} id="age" />
          <ErrorMessage errors={errors} name="age" />
        </div>

        <div className="field-checkbox">
          <input type="checkbox" {...register("isActive")} id="isActive" />
          <label htmlFor="isActive">is active</label>
          <div className="error">
            <ErrorMessage errors={errors} name="isActive" />
          </div>
        </div>

        <button type="submit">Send</button>
      </form>
      <DevTool control={control} />
    </>
  );
} 

Screenshots

Default state

After toggling the checkbox

After toggling the checkbox again

[daxaxelrod]

Here I was thinking i was crazy. Facing the same thing