Overlay2 autoFocus fails when mounted as open in React 18

[PetrusAsikainen]

Environment

• Package version(s): v5.10.5
• Operating System: Windows
• Browser name and version: Firefox 127.0.2
• Also reproduced on Chromium 122.0.6261.94 in Debian under WSL

Code Sandbox

https://codesandbox.io/p/devbox/long-tree-htjf9p

Steps to reproduce

1. Click "Open dialog"
2. Press Esc
3. (Close the dialog and click "Unmount" to reset)

Actual behavior

Dialog is always in focus (pressing Esc closes it)

Expected behavior

Pressing Esc does not close the dialog when opened for the first time

Possible solution

This comment added with Overlay2 is exactly the root cause; the dialog's autoFocus does not work properly. (I'm not sure if this is intentionally left as is.)

blueprint/packages/core/src/components/overlay2/overlay2.tsx

Lines 128 to 135 in 2dc48d8

	// container element may be undefined between component mounting and Portal rendering
	// activeElement may be undefined in some rare cases in IE
	const container = getRef(containerElement);
	const activeElement = getActiveElement(container);
	if (container == null || activeElement == null) {
	return;
	}

When the dialog is mounted with isOpen={true}, React 18 seems to pretty consistently mount the overlayWillOpen useEffect and even let the bringFocusInsideOverlay requestAnimationFrame run before rendering the Portal and container.

In our much larger application, I was also able to reproduce this with a mounted lazy Dialog, but not lazy={false}, so this might depend on render performance fluctuations or something. This also affects all of React 18, not just StrictMode.

This is quite a minor annoyance, but might need delaying the auto-focus to a later callback.