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

DialogV2: re-set focusTrap when footer content changes #4779

Merged
merged 20 commits into from
Sep 9, 2024
Merged

DialogV2: re-set focusTrap when footer content changes #4779

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2d93ea0
Focus close button on second step
TylerJDev Jul 26, 2024
0bddfe9
Remove `autofocus` prop
TylerJDev Jul 26, 2024
78a16cc
Add dependencies to focus trap
TylerJDev Jul 29, 2024
e066cd2
Add changeset
TylerJDev Jul 29, 2024
6886bb7
lint fix
TylerJDev Jul 29, 2024
176a634
Remove `body` from dependency
TylerJDev Jul 30, 2024
d0a1153
add state to Dialog example
siddharthkp Jul 31, 2024
bec8a2d
chore(changeset): enter prerelease mode for v37 (#4789)
joshblack Jul 29, 2024
068a4dc
Autocomplete: Only open menu on click (#4771)
TylerJDev Jul 29, 2024
ef127aa
Prep for high contrast theme border-color changes (#4774)
langermank Jul 29, 2024
880b759
chore: add package version numbers (#4796)
joshblack Jul 30, 2024
dfc1f80
feat: add postcss-preset-primer (#4751)
joshblack Jul 30, 2024
dc1e825
Utilize `aria-describedby` on all `ActionList` descriptions (#4666)
TylerJDev Jul 31, 2024
7a6b77f
Wrap `header` and `footer` with `<Box>`
TylerJDev Jul 31, 2024
99e54eb
Merge branch 'main' into tylerjdev/dialog-fixes
TylerJDev Jul 31, 2024
d795d2e
Move `<Box>`
TylerJDev Jul 31, 2024
c440687
Add back focus to story
TylerJDev Jul 31, 2024
44db772
Update behaviors package
TylerJDev Aug 23, 2024
085c97c
Merge branch 'main' into tylerjdev/dialog-fixes
TylerJDev Aug 23, 2024
4d7eba0
Move back `useFocusTrap`
TylerJDev Sep 9, 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
Prev Previous commit
Next Next commit
Wrap header and footer with <Box>
  • Loading branch information
@TylerJDev
TylerJDev committed Jul 31, 2024
commit 7a6b77fbf5a9db355e57b5a0113e6e745cb004c3
19 changes: 8 additions & 11 deletions packages/react/src/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,15 +469,12 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
}),
)

useFocusTrap(
{
containerRef: dialogRef,
initialFocusRef: initialFocusRef ?? autoFocusedFooterButtonRef,
restoreFocusOnCleanUp: returnFocusRef?.current ? false : true,
returnFocusRef,
},
[dialogRef, footer],
)
useFocusTrap({
containerRef: dialogRef,
initialFocusRef: initialFocusRef ?? autoFocusedFooterButtonRef,
restoreFocusOnCleanUp: returnFocusRef?.current ? false : true,
returnFocusRef,
})

return (
<>
Expand All @@ -494,11 +491,11 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
{...positionDataAttributes}
sx={sx}
>
{header}
<Box>{header}</Box>
<ScrollableRegion aria-labelledby={dialogLabelId} className="DialogOverflowWrapper">
{body}
</ScrollableRegion>
{footer}
<Box>{footer}</Box>
</StyledDialog>
</Backdrop>
</Portal>
Expand Down
Loading