Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add focus on initial render to Form Error List #1328

Merged

Conversation

alimpens
Copy link
Contributor

@alimpens alimpens commented Jul 5, 2024

This adds focus on initial render to Form Error List, as prescribed by gov.uk.

I had to split the component in 2 parts. One part sets the document title, creates a state and returns early if there are no errors.
The second part is what renders when the component does receive a list of errors.
These parts had to be separated because the early return caused the hooks used (useRef, useImparitiveHandle, useEffect) to be called conditionally, which isn't allowed by the rules of hooks.

The hasFocusedOnce state is necessary to prevent the component receiving focus every time it's shown on screen. React Hook Form validates on submit and revalidates on change, which causes the component to appear while your typing. You don't want to move focus from the input you're typing in to the Form Error List in those cases.

@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 9, 2024 10:49 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 10, 2024 08:09 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 10, 2024 08:11 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 10, 2024 13:02 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 12, 2024 10:17 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 12, 2024 11:02 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 12, 2024 11:04 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 17, 2024 07:50 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 17, 2024 07:53 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 17, 2024 11:37 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 17, 2024 11:40 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 19, 2024 08:42 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 19, 2024 08:45 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-793-add-autofocus-to-form-error-list July 19, 2024 09:10 Destroyed
@VincentSmedinga VincentSmedinga merged commit 09387b7 into develop Jul 19, 2024
6 checks passed
@VincentSmedinga VincentSmedinga deleted the feature/DES-793-add-autofocus-to-form-error-list branch July 19, 2024 09:15
@github-actions github-actions bot mentioned this pull request Jul 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants