Removing focused element inside dialog or dropdown makes CPU spike in chrome.

Bug report

Current Behavior

Removing focused element inside dialog or dropdown makes CPU spike. Possibly due to focus trapping logic.

Bug

Expected behavior

CPU spike shouldn’t happen

Reproducible example

https://codesandbox.io/s/confident-pasteur-30gc2q

Suggested solution

Manually handling focus trap as suggested here works https://github.com/radix-ui/primitives/issues/1498#issuecomment-1194346289

document.addEventListener('focusout', (event) => {
  if (event.relatedTarget === null) container.focus();
})

Additional context

Related issue: https://github.com/radix-ui/primitives/issues/1498#issuecomment-1194346289

This works fine on other OS.

Your environment

Software	Name(s)	Version
Radix Package(s)	Dialog	1.0.0
React	n/a	17
Browser	Chrome (MacOS)	103.0.5060.53
Assistive tech
Node	n/a
npm/yarn
Operating System	MacOS	all

[benoitgrelard]

Yeah I see it now. Given that sandbox from @dsdeur, it seems to be a bug in Chrome itself to be honest. We’ll see if we can get around it.

[benoitgrelard]

If there is a way to disable the automatic focus handling in Radix that triggers the issue it would be relatively easy to work around it and manually handle focus in my app for these cases.

You can do this already on the Content part:

onCloseAutoFocus={event => {
  // focus what you want here, for example the previous item
  previousItemRef.current?.focus();
  event.preventDefault();
}}