disabled state causes infinity loop and freezes entire app

[jantimon]

Version Number

7.49.0

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/disabled-react-hook-forms-ntj84p

import { useForm, SubmitHandler } from "react-hook-form";

type Inputs = {
  exampleRequired: string;
};

export default function App() {
  const { register, handleSubmit, formState, getFieldState } =
    useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  console.log(getFieldState("example", formState));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("exampleRequired", { required: true, disabled: true })}
      />
      {formState.errors.exampleRequired && <span>This field is required</span>}
      <input type="submit" />
    </form>
  );
}

Steps to reproduce

PR with a failing test: #11288

Manual:

1. Open Sandbox
2. Click submit for a disabled field
3. Form hands in endless loop:
   

Expected behaviour

disabled in combination with getFieldState should not cause a never ending infinity loop

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

we saw that the loop is _updateDisabledField -> updateTouchAndDirty

updateTouchAndDirty:

_formStateDirtyFields === {}
_proxyFormState.dirtyFields === "all"
isPreviousDirty: undefined
isBlurEvent: false
shouldUpdateField: true

shouldRenderFormState returns "dirtyFields"

Screenshot

Code of Conduct

• I agree to follow this project's Code of Conduct