[FocusScope] Fix bug where focus is moved to container when it shouldn't be

[BenLorantfy]

Description

Fixes bug described in #2436 where focus was moved to the container unnecessarily. The bug occurs when an element is removed via an onBlur callback.

Before

before.mov

After

after.mov

More technical details

Let's say we have some error text "This field is required" that is removed when the field is filled in and blurred. The current code checks if any node is removed in the mutation observer (not just if the focused element is removed), and if so focuses the container. The text getting removed triggers this condition:

primitives/packages/react/focus-scope/src/FocusScope.tsx

Line 115 in 660060a

if (mutation.removedNodes.length > 0) focus(container);

Additionally, the early return is not triggered here:

primitives/packages/react/focus-scope/src/FocusScope.tsx

Line 113 in 660060a

if (focusedElement !== document.body) return;

Because during any blur, the activeElement is document.body. This means checking document.activeElement === document.body is not a robust way of checking if the focus was lost.

The fix was to prevent focusing the container if the last focused element is still in the container:

primitives/packages/react/focus-scope/src/FocusScope.tsx

Lines 124 to 131 in a3c1e51

	// If the last focused element is still in the container, then it wasn't
	// removed and we don't need to rescue focus
	const lastFocusedElementStillInContainer = container?.contains(
	lastFocusedElementRef.current
	);
	if (lastFocusedElementStillInContainer) return;
	focus(container);

I left the previous checks in place because I was a bit scared to remove them, but it may not be required. The vue fork fixed this by replacing the existing checks: https://github.com/radix-vue/radix-vue/pull/519/files