Focus trap lost when you click an item and remove it

Bug report

Current Behavior

If you click an item and remove it, the focus gets set to the browser’s Url bar.

When you tab back into the body content, you can tab to elements that are behind the focus trap.

Expected behavior

Focus shouldn’t go to the Url bar after removing an item.

If it does, you should return to the focus trap instead of elements outside it.

Reproducible example

Code: https://codesandbox.io/s/hardcore-stitch-ne0g0n?file=/App.js

Easier to reproduce fullscreen: https://ne0g0n.csb.app/

Additional context

Previously I’ve been using focus-trap-react and it didn’t have the same issue. Focus doesn’t go to the Url bar when items are removed, and if you manually focus the Url bar, you will return to the tab trap straight away.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	0.1.8-rc.48
Radix Package(s)	@radix-ui/react-select	0.1.2-rc.50
React	n/a	latest
Browser	Chrome	102.0.5005.115
Operating System	Mac	12.4

[benoitgrelard]

@jjenzz from my previous comment here: https://github.com/radix-ui/primitives/issues/1498#issuecomment-1177874105

This actually looks like a bug in Chrome, as Firefox and Safari don’t raise a focusout event when the element that has focus gets deleted.

So looks like in theory it might work because even though focusout is only raised by Chrome in these cases (when deleting the focused element) the next tab keeps it inside magically in the other browsers (I have no idea how they do that).

However, I remember trying exactly what you did here from within FocusScope but had issues with distinguishing that case from other cases where relatedTarget is also null.

I’ll give it another spin soon.

[benoitgrelard]

This is an example in Dialog.