-
Notifications
You must be signed in to change notification settings - Fork 196
chore: Fixes funnel integ tests with React 18 strict mode #3852
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
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3852 +/- ##
==========================================
- Coverage 97.14% 97.14% -0.01%
==========================================
Files 844 844
Lines 24515 24520 +5
Branches 8645 8647 +2
==========================================
+ Hits 23815 23819 +4
- Misses 693 694 +1
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
clearTimeout(handle); | ||
|
||
// There is no need in cleanup if the funnel was not started. | ||
if (!funnelInteractionId) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The funnel is started with a 1ms timeout in the code above. If the useEffect is called in a quick succession, which is the case in React 18 strict mode, the first cleanup runs before the setTimeout callback. In that case we issue the "cancelled" event, even though the funnel was not actually started. The updated code prevents just that.
// `disabled` changes from true to false. | ||
useEffect(() => { | ||
const assignRestoreFocusTarget = () => { | ||
if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The funnel complete event is fired when the focus leaves the elements of the funnel. In case the funnel includes a modal, and that modal is opened and then dismissed - the focus is expected to come back to the trigger button, so it stays within the funnel. In React 18 strict mode, the focus does not return to the trigger (and goes to the body), causing the complete event and also worsening the UX and a11y of the modals.
This happens because the code in this useEffect also fires after the modal is opened and the dismiss button is auto-focused. As result, the document.activeElement points not to the trigger, but to the dismiss button instead, which is unexpected. We prevent that by ensuring the active element is outside of the focus-locked container.
Description
Without these changes a number of integration tests fail when run with React 18 strict mode, reproducible here: #3829
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md
.CONTRIBUTING.md
.Security
checkSafeUrl
function.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.