Summary
When an element inside a focus trap container has focus and its parent is deleted, the focus is lost to the body. Contrarily, when the focused element itself is removed, the focus remains within the focus trap container and moves to the first focusable element.
Steps to Reproduce the Gap
- Open the sandbox https://codesandbox.io/p/sandbox/y2s3np.
- Open the codesandbox console, so check the
document.activeElement being printed every 100ms.
- Click on the Activate button to activate the focus trap.
- Press the "Remove me 1" button.
Expected Behavior
- Focus goes to the input. ✅
- Press the "Remove me 2" button.
- Focus goes to the input. ✅
Actual Behavior
- Focus goes to the input. ✅
- Press the "Remove me 2" button.
- Focus goes to the body. ❌
Example Details
- The main difference between the "Remove me 1" and "Remove me 2" buttons is that clicking the first one removes the button itself and clicking the second one removes the wrapper div.
Summary
When an element inside a focus trap container has focus and its parent is deleted, the focus is lost to the
body. Contrarily, when the focused element itself is removed, the focus remains within the focus trap container and moves to the first focusable element.Steps to Reproduce the Gap
document.activeElementbeing printed every 100ms.Expected Behavior
Actual Behavior
Example Details