Skip to content

Conversation

pan-kot
Copy link
Member

@pan-kot pan-kot commented Sep 9, 2025

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

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Sep 9, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.14%. Comparing base (ce7b93a) to head (c365cde).
⚠️ Report is 4 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pan-kot pan-kot changed the title funnel tests experiment chore: Fixes funnel integ tests with React 18 strict mode Sep 10, 2025
clearTimeout(handle);

// There is no need in cleanup if the funnel was not started.
if (!funnelInteractionId) {
Copy link
Member Author

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)) {
Copy link
Member Author

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.

@pan-kot pan-kot marked this pull request as ready for review September 10, 2025 07:32
@pan-kot pan-kot requested a review from a team as a code owner September 10, 2025 07:32
@pan-kot pan-kot requested review from johannes-weber and removed request for a team September 10, 2025 07:32
@pan-kot pan-kot added this pull request to the merge queue Sep 10, 2025
Merged via the queue into main with commit ce69f00 Sep 10, 2025
42 of 43 checks passed
@pan-kot pan-kot deleted the r18-funnel branch September 10, 2025 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants