react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

useFocusRing not working inside iframe

Open ritz078 opened this issue 1 year ago • 3 comments

Provide a general summary of the issue here

In the latest release 3.32.0, react-aria added support for iframe tracking but it is not working correctly.

🤔 Expected Behavior?

useFocusRing should work inside a dynamically created iframe.

😯 Current Behavior

useFocusRing doesn't works. It never assumes that the element is focused.

🖥️ Steps to Reproduce

Here is a reproduction

https://codesandbox.io/p/sandbox/keen-julien-55yhq6?file=%2Fsrc%2FApp.js%3A33%2C9

Version

3.32.0

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

MacOS

ritz078 avatar Feb 15 '24 15:02 ritz078

Thanks for the issue.

Added a few more things to check https://codesandbox.io/p/sandbox/festive-merkle-3gyd37?file=%2Fsrc%2FApp.js%3A22%2C16

A button in the main body is working fine, so doesn't appear to be a problem with initial setup. I've moved from alerts to console.logs in case that was moving focus around. I've kept the outline so I know if I have focus on a button.

I've tried waiting for the button within the iframe to render and update state before calling addWindow. It still doesn't work, so we can rule out a timing issue with the registration.

Will need to do it locally and dive more into the code.

snowystinger avatar Feb 15 '24 23:02 snowystinger

Thanks [at]snowystinger for looking into this.

@slye-stripe You mentioned somewhere that you have been using this code internally. Does this require any special handling to make this work ?

ritz078 avatar Feb 18 '24 22:02 ritz078

@ritz078 We only call addWindowFocusTracking, will look into this as well 👀

slye-stripe avatar Feb 20 '24 15:02 slye-stripe