Persist focus in place after removing element from DOM

[mgolawski]

Description The focus behaviour for removed DOM elements is different than native one. If user is focused on the element Foo, and that element is removed from DOM, the very next Tab key press moves the focus correctly to the next focusable element on the page.

However, while the focused element is inside the trapped content, and the focused element is removed from DOM, the next Tab key press moves the focus to the first element inside a trapped container.

Please see attached code sandbox

Versions

• Browser/OS verion(s) involved: Chrome / Code sandbox
• focus-trap-react version used: latest

Sandbox Reproduction steps:

• Focus via keyboard one of the number buttons
• Press enter, to remove item
• Press tab to focus next element

Behaviour while wrapped with Focus Trap: The focus goes back to the very first element inside the trapped container

Behaviour without Focus Trap: In order to see that, comment out the <TrappedComponent> usage. The focus goes natively to the next element in DOM structure. Browser somehow remembers the place of focus

Code sandbox

[stefcameron]

@mgolawski Thank you for pointing this out and for the CodeSandbox paired down demo; very helpful! Could you please confirm whether this is an issue when only https://github.com/focus-trap/focus-trap is used (i.e. without React, just the DOM and Focus-trap)? I suspect you'll see the same behavior, in which case we should discuss this within the context of Focus-trap rather than Focus-trap-react.

[stefcameron]

Still looking for that other repro so we can determine what library the issue belongs in.