Use top-level `disabled` prop on `useForm` to disable forms

[david-crespo]

#1893 handles instance create, which is the worst offender because the POST takes a long time to come back. But strictly speaking, every other form has the same problem. We could manually wire up every form with disabled props on every field, like in #1893, but it would probably be better if we could find a more automatic way.

Someone asked about this here but didn't get an answer:

https://github.com/orgs/react-hook-form/discussions/11171
https://github.com/orgs/react-hook-form/discussions/11057

RHF recently (in v7.48.0) added a way to pass disabled to useForm, and then it might automatically get passed into all registered fields. Worth exploring!

react-hook-form/react-hook-form#10496

[charliepark]

Crespo and I looked at this a bit today, and determined that — once we upgrade RHF — this should work in SideModalForm:

  // Disable side modal forms while submitting
  useEffect(() => {
    form.control._disableForm(loading)
  }, [form.control, loading])

_disableForm is currently undocumented, so Crespo also asked the RHF team directly about future plans for it: https://github.com/orgs/react-hook-form/discussions/11462

[david-crespo]

Not sure why we didn't think of this before, but it seems clear from their examples (PR, release) that the way you're supposed to do this is have a disabled state variable and call setState on it to change the form's disabled state.

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const { handleSubmit } = useForm({ disabled });

  return (
    <form
      onSubmit={handleSubmit(async () => {
        setDisabled(true);
        await sleep(100);
        setDisabled(false);
      })}
    / >
  );
}

So the above business about calling _disableForm shouldn't be necessary if can control disabled wherever we call useForm and pass the setDisabled around wherever we need to.