Skip to content

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Sep 10, 2025
Merged

chore: Fixes funnel integ tests with React 18 strict mode #3852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/internal/analytics/components/analytics-funnel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,12 +182,16 @@ const InnerAnalyticsFunnel = ({ mounted = true, children, stepConfiguration, ...
setFunnelInteractionId(funnelInteractionId);
}, 1);

/*
A funnel counts as "successful" if it is unmounted after being "complete".
*/
// A funnel counts as "successful" if it is unmounted after being "complete".
/* eslint-disable react-hooks/exhaustive-deps */
return () => {
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.

return;
}

if (props.funnelType === 'single-page' && wizardCount.current > 0) {
return;
}
Expand Down
20 changes: 12 additions & 8 deletions src/internal/components/focus-lock/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function FocusLock(
{ className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,
ref: React.Ref<FocusLockRef>
) {
const returnFocusToRef = useRef<HTMLOrSVGElement | null>(null);
const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null);

const focusFirst = () => {
Expand All @@ -44,21 +44,25 @@ function FocusLock(
// Captures focus when `autoFocus` is set, and the component is mounted or
// `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.

restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;
}
};
if (autoFocus && !disabled) {
returnFocusToRef.current = document.activeElement as HTMLOrSVGElement | null;
assignRestoreFocusTarget();
focusFirst();
}
}, [autoFocus, disabled]);

// Restore focus if `restoreFocus` is set, and `disabled` changes from false
// to true.
// Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.
const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);
useEffect(() => {
if (previouslyDisabled !== !!disabled) {
setPreviouslyDisabled(!!disabled);
if (restoreFocus && disabled) {
returnFocusToRef.current?.focus();
returnFocusToRef.current = null;
restoreFocusTargetRef.current?.focus();
restoreFocusTargetRef.current = null;
}
}
}, [previouslyDisabled, disabled, restoreFocus]);
Expand All @@ -68,8 +72,8 @@ function FocusLock(
const restoreFocusHandler = useCallback(
(elem: HTMLDivElement | null) => {
if (elem === null && restoreFocus) {
returnFocusToRef.current?.focus();
returnFocusToRef.current = null;
restoreFocusTargetRef.current?.focus();
restoreFocusTargetRef.current = null;
}
},
[restoreFocus]
Expand Down
Loading