When using the hook useFocusInvalid, introduced in Schema Validation lesson 01. Zod schema validation, we have a problem: The actionData.status is always equals to 'error', which means the useEffect only runs once. This leads us not having the focus being set properly after the second "invalid" submission attempt:
* Just a note that this was not occurring in the previous lessons, as actionData was used as a dependency and therefore was new after every submission
The proposed solution is simply to add is to add isSubmitting in the boolean that forms hasErrors, so we can have the useEffect running after every submission:
When using the hook
useFocusInvalid, introduced in Schema Validation lesson 01. Zod schema validation, we have a problem: TheactionData.statusis always equals to'error', which means theuseEffectonly runs once. This leads us not having the focus being set properly after the second "invalid" submission attempt:https://github.com/epicweb-dev/web-forms/assets/46943072/91426e67-f44f-4536-8049-67e1410357d4
* Just a note that this was not occurring in the previous lessons, as
actionDatawas used as a dependency and therefore was new after every submissionThe proposed solution is simply to add is to add
isSubmittingin the boolean that formshasErrors, so we can have theuseEffectrunning after every submission:https://github.com/epicweb-dev/web-forms/assets/46943072/e4b46352-4c6b-461a-bd9f-25539203d13c