useBlocker and React Hook Form

[ThaynarLima]

Hello!

I'm using useBlocker on my application. The scenario is the following:

1. I Have a form and if I try to leave the form with dirty values I get a modal explaining that I'll lose all data typed on the form.
2. User can confirm or cancel the navigation and then i use proceed for confirming and reset for canceling.
3. The problem is that when I click on save, and the user is saved I should be redirected to the list of items, but as react hook form reset function takes a bit to reset, the blocker is called even when it shouldn't, because it has the "old" isDirty true prop.

Is there a way useBlocker could have a dependency in which I would use my isDirty so it is updated when it gets called?my workaround for now is put a setTimeout around my navigation so it gets called after reset is done.

[david-crespo]

We are running into a similar issue. We don't use reset, so it's not isDirty we're concerned about. The problem is that isSubmitSuccessful is not turning to true before our navigate happens. It takes another 30ms or so after the submit callback finishes to see it turn true. This is true even when I manually put the navigate() call after await handleSubmit(...).

https://github.com/oxidecomputer/console/blob/e8bf056cc1856f96793518a0b619026e91a883fa/app/components/form/FullPageForm.tsx#L58-L76

[with-key]

useBlocker(formMethods.formState.isDirty)

[User6531]

any updates?

[floooptimism]

I had this problem with RHF's reset as well. What I did was add another condition in my useBlocker condition that isn't managed by React. In my case, I used Jotai, but you could use anything, like storing it in a singleton object.

Setting up an external store with Jotai:

const blockerStore = createStore();
export const blockerActiveOverrideAtom = atom(true);
export const setIsBlockerActiveOverride = (val) => blockerStore.set(blockerActiveOverrideAtom, val);
export const getIsBlockerActiveOverride = () => blockerStore.get(blockerActiveOverrideAtom);

my useBlocker would look like this

const blocker = useBlocker(() => isDirty && getIsBlockerActiveOverride());

So instead of resetting the form, you can just set setIsBlockerActiveOverride to false and should navigate out without getting blocked.

[bycolour2]

Any updates?
Preferably using "natural" rhf & rrd methods