Overlay2 displays unwanted focus outline on initial render

[ggdouglas]

Description

When using the <Overlay2> component with isOpen={true}, a 2px blue line (focus outline) appears at the top of the page during the initial render, before any user interaction (e.g., clicks). This happens even though FocusStyleManager.onlyShowFocusOnTabs() is present.

Example Code:

import { FocusStyleManager, Overlay2, Classes } from "@blueprintjs/core";

FocusStyleManager.onlyShowFocusOnTabs();

const App = () => (
  <Overlay2 isOpen={true} backdropClassName={Classes.POPOVER_BACKDROP}>
    {/* Overlay content */}
  </Overlay2>
);

The problem seems to stem from FocusStyleManager only initializing and applying the .bp5-focus-disabled class to the root document after the first mousedown interaction. Until then, focus styles are still applied to focused elements.

blueprint/packages/core/src/common/interactionMode.ts

Lines 38 to 40 in 9c16d3a

	public start() {
	this.container.addEventListener("mousedown", this.handleMouseDown);
	this.isRunning = true;

Environment

• Package version(s): 5.16.4
• Browser name and version: Chrome 131.0.6778.265

Code Sandbox

Minimal repro here (visible in debug preview)

Note this bug is easier to reproduce when toggling the "Emulate a focused page" setting in tools, rendering -> check "emulate a focused" page

Steps to reproduce

1. Set up FocusStyleManager:
   Include FocusStyleManager.onlyShowFocusOnTabs() in your application.

2. Render Overlay2:
   Render an <Overlay2> component with isOpen={true}:

   <Overlay2 isOpen={true} backdropClassName={Classes.POPOVER_BACKDROP}>
     {/* Overlay content */}
   </Overlay2>

3. Load the page:
   Load the page without any prior interaction (do not click or tap).

4. Observe the issue:
   Notice a blue focus outline at the top of the page.

   Tip: To reproduce the issue more reliably, enable "Emulate a focused page" in Chrome DevTools:

   • Open DevTools
   • Go to Rendering tab
   • Check Emulate a focused page

Expected behavior

The focus outline (blue border) should not be displayed upon initial render due to FocusStyleManager.onlyShowFocusOnTabs(), which should suppress focus styles unless the user is navigating via keyboard.

Actual behavior

A blue focus outline appears at the top of the page on initial load before any user interaction.

Screenshots:

Focus outline visible at the top:

Possible solution

Adjust FocusStyleManager to apply the .bp5-focus-disabled class to the document immediately on page load, not after the first mousedown event.