Skip to content

Bug: Fragment ref blur() does not blur nested focused elements #37124

Description

@fallintoplace

React version: current main (b685b40; experimental Fragment refs)

Steps To Reproduce

  1. Render a Fragment ref whose first focusable element is nested inside a host child.
  2. Call focus() on the Fragment ref.
  3. Call blur() on the same Fragment ref.

Link to code example:

const fragmentRef = React.createRef();

<Fragment ref={fragmentRef}>
  <div>
    <input id="nested-input" />
  </div>
</Fragment>;

fragmentRef.current.focus();
fragmentRef.current.blur();

The existing Fragment refs fixture contains this shape: its first focusable child is a button nested inside a div.

The current behavior

focus() finds and focuses the nested input, but blur() leaves it focused. blur() only compares the active element with the Fragment direct host children, so it sees the containing div rather than the focused descendant.

The expected behavior

blur() should remove focus when the active element is anywhere within a Fragment host child, matching the deep traversal behavior of focus().

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions