-
Notifications
You must be signed in to change notification settings - Fork 46.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Focus restore after elements are reordered does not work in child windows #30864
Comments
This comment was marked as spam.
This comment was marked as spam.
Your current implementation only uses the global 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;
} |
@Felixdiamond to clarify the snippet linked is from the React codebase 😅, that is not my code |
…30951) ## Summary Fixes #30864 Before this PR the active elemen was always taken from the global `window`. This is incorrect if the renderer is in one window rendering into a container element in another window. The changes in this PR adds another code branch to use a `defaultView` of the container element if it exists so that `restoreSelection` after a commit will actually restore to the correct window. ## How did you test this change? I patched these changes to the repro repo in the linked issue #39864 https://github.com/ling1726/react-child-window-focus-repro/blob/master/patches/react-dom%2B18.3.1.patch. I followed the same repro steps in the linked issue and and could not repro the reported problem. Attaching screen recordings below: Before ![focus repro](https://github.com/user-attachments/assets/81c4b4f9-08b5-4356-8251-49b909771f3f) After ![after](https://github.com/user-attachments/assets/84883032-5558-4650-9b9a-bd4d5fd9cb13) DiffTrain build for [d9c4920](d9c4920)
@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 |
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
npm install
npm run dev
http://localhost:5173/
ArrowUp
andArrowDown
ArrowUp
andArrowDown
Recording:
Link to code example: https://github.com/ling1726/react-child-window-focus-repro
The current behavior
The current
getActiveElementDeep
always uses the globalwindow
keyword. Note this snippet is from the React codebasereact/packages/react-dom-bindings/src/client/ReactInputSelection.js
Lines 59 to 71 in 4f60494
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
The text was updated successfully, but these errors were encountered: