Lazy vs. Non-Lazy Overlay2-based components have different initial focus trapping behavior

[ggdouglas]

Environment

• Package version(s): 6.x
• Operating System: macOS 15.5 (24F74)
• Browser name and version: Chrome 138.0.7204.169

Code Sandbox

Link to a minimal repro: https://codesandbox.io/p/sandbox/8wvjhj

Description

For Overlay2-based components, initial (first time click) focus trapping behavior appears to differ depending on whether the underlying Overlay2 component is rendered as lazy={true} (the default) or lazy={false}. Additionally, lazy loaded Overlays have different focus trapping behavior depending on whether or not the Overlay has been previously opened.

This seems to affect components which use Overlay2 internally and manage focus capturing, notably:

• Popover
• Dialog
• Drawer

Steps to reproduce

1. Given a Popover with lazy={true} the default:

<Tooltip content="content" lazy={true}>
    <Button>target</Button>
</Tooltip>

2. Click on the button target, "target", to open the Popover
3. Observe that the current active element is the button: button.bp6-button.bp6-active
4. Close the Popover
5. Click on the button target again to open the Popover again
6. Observe that the current active element is different from the first time. This time it is the Overlay2 focus trap: div.bp6-overlay-start-focus-trap.bp6-popover-enter-done

CleanShot.2025-07-30.at.16.45.23.mp4

Actual behavior

The element that receives focus should not differ based on whether the Overlay has been opened before or not. This behavior also notably does not occur when explicitly setting lazy={false}

CleanShot.2025-07-30.at.16.52.10.mp4

[ggdouglas]

Possible duplicate of #6902