-
Notifications
You must be signed in to change notification settings - Fork 12
Add observer to focus-trap #429
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
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 |
siddharthkp
left a comment
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
siddharthkp
left a comment
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-trapthat ensures that thesentinelelements 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:
observeFocusTrapfunction to create aMutationObserverthat maintains sentinel elements at the correct positions. (src/focus-trap.ts)observeFocusTrapfunction into thefocusTrapfunction to observe changes in the container and reposition sentinel elements as needed. (src/focus-trap.ts)MutationObserveris disconnected when the focus trap is released to prevent memory leaks. (src/focus-trap.ts)