Shadow dom event handling #8991
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
# Conflicts: # package.json # packages/@react-aria/combobox/src/useComboBox.ts # packages/react-aria-components/src/Popover.tsx
|
I haven't touched tests yet, but wanted to open this PR as a draft given the scope of what I've touched. I feel like I should scale back, as the size of the delta is scary, but at the same time, react-spectrum won't have shadow DOM support unless all bubbling event.target or node.contains calls are shadow-dom safe. I didn't touch changeEvents because they don't bubble. |
| return event.composedPath()[0] as Element; | ||
| export function getEventTarget<E, SE extends SyntheticEvent<E>>(event: SE): SE extends EventTargetType<infer Target> ? Target : never; | ||
| export function getEventTarget(event: Event): EventTarget | null; | ||
| export function getEventTarget<E, SE extends SyntheticEvent<E>>(event: Event | SE): EventTarget | null { |
There was a problem hiding this comment.
I made two major enhancements to this function's Typescript definition:
- Use function overloading to give a more accurate return type when a SyntheticEvent is used. For example, the target for a
FocusEventisEventTarget & Target. The first overload preserves that type, resulting in no need for type assertions in those situations compared to usingevent.target. - If the event is a
Event, then the return type isEventTarget | null, which is consistent with the type definitions in @types/react. The existing implementation assumes that event.target isElement. While is this true in most circumstances, I worry that glossing over the edge cases in this central function could have unforeseen runtime consequences.
| ``` | ||
|
|
||
| It's likely that you are using a different version of Node.js. Please use Node.js 18. When changing the node version, delete `node_modules` and re-run `yarn install` | ||
| It's likely that you are using a different version of Node.js. Please use Node.js 22. When changing the node version, delete `node_modules` and re-run `yarn install` |
There was a problem hiding this comment.
package.json has:
"@types/node@npm:*": "^22",
"@types/node@npm:^18.0.0": "^22",
"@types/node@npm:>= 8": "^22",
This implies that the recommended Node.js version has changed. If true, documentation should update as well.
| "en-US" | ||
| ] | ||
| ], | ||
| "volta": { |
There was a problem hiding this comment.
Volta has been extremely helpful in my projects to standardize versions of node and yarn used by my developers. Hopefully this isn't an untoward addition to package.json.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #8675
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: