fix(core): fix issues with PT-Input PopoverModal #8021
Merged
+45
−45
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
No changes to documentation |
skogsmaskin
force-pushed
the
fix/pte-popover-modal
branch
from
2f8c9b2 to
c68ca36
Compare
|
Component Testing Report Updated Dec 13, 2024 1:01 PM (UTC) ❌ Failed Tests (6) -- expand for details
|
⚡️ Editor Performance ReportUpdated Fri, 13 Dec 2024 13:01:46 GMT
Detailed information🏠 Reference resultThe performance result of
🧪 Experiment resultThe performance result of this branch
📚 Glossary
|
skogsmaskin
commented
Dec 12, 2024
| if (contentElement) { | ||
| contentElement.querySelector('input')?.focus() | ||
| } | ||
| }, [contentElement]) |
There was a problem hiding this comment.
This should rather be handled by the autoFocus prop so that it works like the other Modals we use (where the first focusable element is focused, usually the close-button).
There was a problem hiding this comment.
That works in my testing 👍.
skogsmaskin
changed the title
skogsmaskin
force-pushed
the
fix/pte-popover-modal
branch
from
c68ca36 to
465db20
Compare
skogsmaskin
changed the title
skogsmaskin
changed the title
skogsmaskin
force-pushed
the
fix/pte-popover-modal
branch
from
465db20 to
f986921
Compare
skogsmaskin
force-pushed
the
fix/pte-popover-modal
branch
from
f986921 to
075fe6d
Compare
This is no longer needed after sanity-io/ui@c95c1c0
…pover Modal The PopoverModal should have the same kind of focus locking as other dialogs
skogsmaskin
force-pushed
the
fix/pte-popover-modal
branch
from
075fe6d to
5bcd296
Compare
skogsmaskin
requested review from
juice49
and removed request for
ricokahler
juice49
approved these changes
Dec 13, 2024
| contentElement.querySelector('input')?.focus() | ||
| } | ||
| }, [contentElement]) | ||
| const handleFocusLockWhiteList = useCallback((element: HTMLElement) => { |
There was a problem hiding this comment.
Language nit: we should use a term like allowList instead.
There was a problem hiding this comment.
allowList
The dependency library uses this term, so it's supposed to match that.
| if (contentElement) { | ||
| contentElement.querySelector('input')?.focus() | ||
| } | ||
| }, [contentElement]) |
There was a problem hiding this comment.
That works in my testing 👍.
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.
Description
Remove the workaround for the @sanity/ui issue (which has been fixed) with the initial rendering in the wrong position. This is no longer needed and can cause problems with assertions in tests.
Implement focus locking inside the modal. The PopoverModal should have the same kind of focus locking as other dialogs
What to review
That popover modals for links inside the Portable Text Input traps focus and work as expected.
The popover modal position is correct when first opened.
Testing
Open a Portable Text Editor with a link schema type and do the review steps above.
Notes for release