Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix: prevent scroll to top on modal close #1313

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix: prevent scroll to top on modal close #1313

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7fe8c3
fix: prevent scroll to top on modal close
dominik-stumpf Jun 24, 2024
0a24199
Merge branch 'main' into dominik/guild-3295-on-modal-close-the-page-s…
dominik-stumpf Jul 3, 2024
1f650db
chore: define focus restoration explicitly
dominik-stumpf Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/common/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Modal = ({ children, ...rest }: ModalProps): JSX.Element => {
const transition = useBreakpointValue<any>(transitionValues)

return (
<ChakraModal motionPreset={transition} {...rest}>
<ChakraModal motionPreset={transition} returnFocusOnClose={false} {...rest}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, this will disable this accessibility feature for all modals, I think we shouldn't do that. ;)

So the root of the issue is that when we close the modal, the focus returns to the NavMenu. That's incorrect, the focus should just return to the menu item which opens the modal, so could you please just fix the focus management in the edit reward modals? I think you should use the Modal component's finalFocusRef to achieve this behaviour, but not sure if it works with modals inside menus, so we might need to find a workaround for that :S

{children}
</ChakraModal>
)
Expand All @@ -22,7 +22,7 @@ const Alert = ({ children, ...rest }: AlertDialogProps): JSX.Element => {
const transition = useBreakpointValue<any>(transitionValues)

return (
<ChakraAlert motionPreset={transition} {...rest}>
<ChakraAlert motionPreset={transition} returnFocusOnClose={false} {...rest}>
{children}
</ChakraAlert>
)
Expand Down