- Start Date: 2023/7/27
- RFC PR: exploration PRs: adobe#4836, adobe#4837
- Authors: Samuel Lye
This RFC proposes improvements to the @react-aria/focus and @react-aria/interactions libraries, particularly around support for iframes when used in combination with React.createPortal. The changes focus on using the correct document and window object. For example, if portalling a React node from the main window to an iframe or from an iframe to another iframe, we should be using the correct document and window object, i.e. that of the iframe, instead of the source frame. This is because the javascript context still runs on the source frame when using React.createPortal. This does not change existing behavior.
Stripe is building embeddable UI components, which adopt the look and feel of the page that they are rendered in. We currently use iframes to prevent cross-origin communication from the page that the UI components are embedded on. Stripe's design system utilizes many of React Spectrum's packages, for instance @react-aria/focus and @react-aria/interactions. However, we have found issues with using these packages when integrating with iframes. There are several existing issues filed by other developers:
- Use the correct ownerDocument: adobe#4634
- FocusScope: adobe#3350
- onPress: adobe#2237
A fix to these issues is to use the correct document and window object in FocusScope, usePress, and useInteractOutside.
We add a utility function in @react-aria/utils that accepts a HTMLElement argument and returns the corresponding ownerDocument and ownerWindow.
N/A.
N/A. We return the original document and window object if the HTMLElement argument is null, which maintains existing behavior.
N/A.
We were looking at patching the NPM packages on our end but realized that the wider community was also facing similar issues. We also want to use the most up-to-date react-spectrum version, therefore we decided to contribute back to the package.