Skip to content

Focus jumps to body when focused element parent is removed #1660

@joseabernardes

Description

@joseabernardes

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

  1. Open the sandbox https://codesandbox.io/p/sandbox/y2s3np.
  2. Open the codesandbox console, so check the document.activeElement being printed every 100ms.
  3. Click on the Activate button to activate the focus trap.
  4. Press the "Remove me 1" button.

Expected Behavior

  1. Focus goes to the input. ✅
  2. Press the "Remove me 2" button.
  3. Focus goes to the input. ✅

Actual Behavior

  1. Focus goes to the input. ✅
  2. Press the "Remove me 2" button.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions