forge42dev / remix-hook-form

Open source wrapper for react-hook-form aimed at Remix.run
MIT License
330 stars 27 forks source link

fix: `isSubmitting` flashes `false` during form submission #103

Closed MonsterDeveloper closed 1 month ago

MonsterDeveloper commented 2 months ago

Fixes #101

Description

I described the issue in #101. This PR is my attempt to fix the bug.

I added a separate state variable to keep track of whether we're actually submitting the form through the network. It is activated when onSubmit is called, and is de-activated when the fetcher or navigation state (through the isSubmittingForm variable) are idle.

Then in the hook return we set isSubmitting as isSubmittingNetwork || methods.formState.isSubmitting, which means "actually submitting the form through the network or the internal react-hook-form hook is doing it's part."

Type of change

Please delete options that are not relevant.

How Has This Been Tested?

Checklist:

MonsterDeveloper commented 2 months ago

@AlemTuzlak I've been trying to write tests but didn't manage... I'm not very experienced with unit testing React hooks, maybe you can come up with a solution. For now it seems like the useMemo is not triggered when the mocked value of useNavigation, so the useEffect is never triggered...

MonsterDeveloper commented 2 months ago

False alarm, managed to get it working. Added a test case that fails when using current version of the hook and passes on the new one.

MonsterDeveloper commented 1 month ago

@AlemTuzlak do you mind taking a look, please?

Hvala:)

MonsterDeveloper commented 1 month ago

Mind doing some minor changes?

Done!