Bug: Focus restore after elements are reordered does not work in child windows

[ling1726]

This affects various Microsoft products that use child windows, and is an accessibility bug for users because focus is lost when they interact with an app and the active element is moved in DOM by React.

React version: 18.3.1

Steps To Reproduce

1. Clone the repro repo https://github.com/ling1726/react-child-window-focus-repro
2. Run npm install
3. Run npm run dev
4. Open the demo app in http://localhost:5173/
5. Reorder the items with ArrowUp and ArrowDown
6. Open example in child window
7. Reorder the items with ArrowUp and ArrowDown
8. Notice that focus is lost immediately after reordering

Recording:

Link to code example: https://github.com/ling1726/react-child-window-focus-repro

The current behavior

The current getActiveElementDeep always uses the global window keyword. Note this snippet is from the React codebase

react/packages/react-dom-bindings/src/client/ReactInputSelection.js

Lines 59 to 71 in 4f60494

	function getActiveElementDeep() {
	let win = window;
	let element = getActiveElement();
	while (element instanceof win.HTMLIFrameElement) {
	if (isSameOriginFrame(element)) {
	win = element.contentWindow;
	} else {
	return element;
	}
	element = getActiveElement(win.document);
	}
	return element;
	}

This fails focus restore when the active element is moved by React because it never gets the correct active element in a child window.

The expected behavior

When React moves an active element it should restore focus to the active element in a child window

[nkalpakis21]

built an app to get paid for this PR
https://www.n0va-io.com/discover/facebook/react

[Felixdiamond]

Your current implementation only uses the global window object which is probably an issue because focus can be within an iframe or child window, where window would be different.

Try this snippet:

function getActiveElementDeep(win = window) {
  let element = getActiveElement(win.document);
  while (element instanceof win.HTMLIFrameElement) {
    if (isSameOriginFrame(element)) {
      win = element.contentWindow;
      element = getActiveElement(win.document);
    } else {
      return element;
    }
  }
  return element;
}

[ling1726]

@Felixdiamond to clarify the snippet linked is from the React codebase 😅, that is not my code

[ling1726]

@josephsavona how does this fix make it to a release? is it it possible to make it land in a patch release for react 18? Would like to have a way to fix issues for disabled users who end up losing focus on an application when DOM get rearranged

[sophiebits]

Hey @ling1726 — we're not currently planning to make any more 18.x releases but there is a new 19 RC last week that you can try updating to. The breaking changes are pretty minor so hopefully it is an easy upgrade.