test: adds ShadowDOM / UNSAFE_PortalProvider tests #8806
Conversation
These tests specifically target issue adobe#8675 where menu items in popovers close immediately instead when using ShadowDOM with UNSAFE_PortalProvider. New test suites added: - FocusScope: Shadow DOM boundary containment issues - usePopover: Shadow DOM popover interactions and focus management - useFocusWithin: Focus within detection across shadow boundaries - useInteractOutside: Interact outside detection with portals I generated these tests with AI then reviewed / updated them.
After applying the patches I mentioned in my issue I've noticed that many of the AI generated tests were either broken or just not testing anything interesting. Luckily there are some that are. I'll have to update the rest of the tests as they aren't passing at the moment.
I have a conflicting default prettier config (I can't seem to find this projects.) I'm reverting a number of my autochanges.
There are a bunch of redundant tests. Getting rid of them for now.
packages/@react-aria/interactions/test/useInteractOutside.test.js
Outdated
Show resolved
Hide resolved
packages/@react-aria/interactions/test/useInteractOutside.test.js
Outdated
Show resolved
Hide resolved
| }); | ||
|
|
||
| return ( | ||
| <UNSAFE_PortalProvider getContainer={() => shadowRoot}> |
There was a problem hiding this comment.
What is consuming the context created by this provider?
| }); | ||
|
|
||
| it('should handle popover interactions with UNSAFE_PortalProvider in shadow DOM', async () => { | ||
| const {shadowRoot} = createShadowRoot(); |
| ); | ||
|
|
||
| return ( | ||
| <UNSAFE_PortalProvider getContainer={() => shadowRoot as unknown as HTMLElement}> |
There was a problem hiding this comment.
same question, what's using this context?
There was a problem hiding this comment.
it may be easier to write the tests in the React Aria Component tests instead of at the hook level, then everything is wired up correctly, and the context will get used by children
are you using the hooks directly? or the components in your application?
There was a problem hiding this comment.
Yeah that's a good question, I'll just add one to the Popover test and not trust AI on this one. I'll remove these tests for now.
| @@ -61,7 +61,7 @@ export const getActiveElement = (doc: Document = document): Element | null => { | |||
| * ShadowDOM safe version of event.target. | |||
| */ | |||
| export function getEventTarget<T extends Event>(event: T): Element { | |||
| if (shadowDOM() && (event.target as HTMLElement).shadowRoot) { | |||
| if (shadowDOM() && (event.target as HTMLElement)?.shadowRoot) { | |||
There was a problem hiding this comment.
interesting, when was this not defined?
There was a problem hiding this comment.
It was a while ago I did this, I'll try and reproduce it and see exactly when this happened.
| @@ -10,7 +10,7 @@ | |||
| * governing permissions and limitations under the License. | |||
| */ | |||
|
|
|||
| import {getOwnerWindow} from '@react-aria/utils'; | |||
| import {createShadowTreeWalker, getOwnerDocument, getOwnerWindow, nodeContains} from '@react-aria/utils'; | |||
There was a problem hiding this comment.
out of curiosity, did you have a look at the changes in #6160 as well? no worries if not, just didn't know if it was on your radar
| const [showTooltip] = React.useState(true); | ||
|
|
||
| return ( | ||
| <UNSAFE_PortalProvider getContainer={() => shadowRoot}> |
There was a problem hiding this comment.
same question about the context here too. I'm guessing the AI got confused, the consumer is inside our hooks/components which call createPortal, it won't just work on every instance of ReactDOM.createPortal unfortunately.
https://react-spectrum.adobe.com/react-aria/PortalProvider.html#contexts
| }; | ||
|
|
||
| return ( | ||
| <UNSAFE_PortalProvider getContainer={() => shadowRoot}> |
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Closes #8675
✅ Pull Request Checklist:
📝 Test Instructions:
Not sure what the test instructions would be, I have this reproduction repo: https://github.com/johnpangalos/rac-shadow-dom-bug-report, but some of the React Spectrum team couldn't run it. I can try and set it up so that you can link the repo to a build of RAC.
I have one non passing test, but I thought it was best to put up a PR anyway with the changes I've had time to finish so far.
The tests were originally created by AI, but I've had to alter them to get them to test what I'd actually like them to test.
🧢 Your Project:
Thomson Reuters (Pagero)