-
Notifications
You must be signed in to change notification settings - Fork 12
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
Add observer to focus-trap #429
Conversation
🦋 Changeset detectedLatest commit: 07e1664 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Let's test the canary version with primer/react#4779 to make sure we don't have any performance regressions |
gonna leave this review to @siddharthkp |
@siddharthkp - Looks like there shouldn't be any big performance regressions. I did not do an in-depth analysis, but I can confirm that the mutation observer should only operate under the following conditions:
In either case, we only re-append the sentinel to the start/end depending on which sentinel needs to be adjusted. Curious on what you think! Screen.Recording.2024-08-21.at.2.01.20.PM.movVideo description: Showcasing items being appended in |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me!
Let's try this with PRC to test further
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's go!
Summary
Adds a mutation observer to
focus-trap
that ensures that thesentinel
elements stay at the start/end. The observer only checks for added elements that are direct descendants of the container, meaning that children of those descendants shouldn't trigger the observer.New Tests:
src/__tests__/focus-trap.test.tsx
)src/__tests__/focus-trap.test.tsx
)Focus Trap Enhancements:
observeFocusTrap
function to create aMutationObserver
that maintains sentinel elements at the correct positions. (src/focus-trap.ts
)observeFocusTrap
function into thefocusTrap
function to observe changes in the container and reposition sentinel elements as needed. (src/focus-trap.ts
)MutationObserver
is disconnected when the focus trap is released to prevent memory leaks. (src/focus-trap.ts
)