Skip to content

fix(modals): bump container-modal hook with improved blur functionality #2056

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

Merged
merged 2 commits into from
Nov 25, 2025
Merged

fix(modals): bump container-modal hook with improved blur functionality #2056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9a4759
fix(modals): bump `container-modal` hook with improved blur functiona…
jzempel Nov 25, 2025
929e6b0
Fix tests and ensure hidden dialog is inert
jzempel Nov 25, 2025
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
134 changes: 121 additions & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/colorpickers/src/elements/ColorPickerDialog/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('ColorPickerDialog', () => {

await user.keyboard('{escape}');

expect(onDialogChange).toHaveBeenCalledTimes(2);
expect(onDialogChange).toHaveBeenCalledTimes(3);
expect(onDialogChange).toHaveBeenCalledWith({ isOpen: false });
});

Expand Down
2 changes: 1 addition & 1 deletion packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ describe('ColorSwatchDialog', () => {

await user.keyboard('{escape}');

expect(onDialogChange).toHaveBeenCalledTimes(2);
expect(onDialogChange).toHaveBeenCalledTimes(3);
expect(onDialogChange).toHaveBeenCalledWith({ isOpen: false });
});

Expand Down
2 changes: 1 addition & 1 deletion packages/modals/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"types": "dist/typings/index.d.ts",
"dependencies": {
"@floating-ui/react-dom": "^2.0.0",
"@zendeskgarden/container-modal": "^1.0.15",
"@zendeskgarden/container-modal": "^1.0.21",
"@zendeskgarden/container-utilities": "^2.0.0",
"@zendeskgarden/react-buttons": "^9.12.1",
"dom-helpers": "^5.1.0",
Expand Down
28 changes: 8 additions & 20 deletions packages/modals/src/elements/TooltipDialog/TooltipDialog.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,36 +264,24 @@ describe('TooltipDialog', () => {
expect(getByTestId('backdrop')).toHaveAttribute('aria-hidden', 'true');

// Open
await act(async () => {
await user.click(trigger);
});
await user.click(trigger);

const openDialog = getByRole('dialog');
expect(openDialog).toBeInTheDocument();
expect(getByTestId('backdrop')).not.toHaveAttribute('aria-hidden');
expect(openDialog).toHaveFocus();

expect(openDialog).not.toBeNull();

// Backdrop should NOT have hideVisually styles when visible
const visibleBackdropStyles = window.getComputedStyle(getByTestId('backdrop'));

expect(visibleBackdropStyles.position).toBe('fixed');

// Close (toggle button again)
await act(async () => {
await user.click(trigger);
});
await user.click(trigger);

// Dialog remains mounted but visually hidden again
const hiddenAgainDialog = queryByRole('dialog', { hidden: true });

// Dialog remains mounted but visually hidden again
expect(hiddenAgainDialog).not.toBeNull();
await waitFor(() => {
expect(getByTestId('backdrop')).toHaveAttribute('aria-hidden', 'true');
// Backdrop should have hideVisually styles applied again
const hiddenBackdropStyles = window.getComputedStyle(getByTestId('backdrop'));
expect(hiddenBackdropStyles.position).toBe('absolute');
expect(hiddenBackdropStyles.width).toBe('1px');
expect(hiddenBackdropStyles.height).toBe('1px');
});
// Focus should return to trigger
expect(trigger).toHaveFocus();
});
});
});
1 change: 1 addition & 0 deletions packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
$placement={placement}
$hasArrow={hasArrow}
$isAnimated={isAnimated}
inert={isHidden ? '' : undefined}
{...modalProps}
{...ariaProps}
{...props}
Expand Down
1 change: 1 addition & 0 deletions packages/modals/src/styled/StyledTooltipDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export interface IStyledTooltipDialogProps {
$isAnimated?: boolean;
$placement: Placement;
$transitionState?: TransitionStatus;
inert?: string;
}

const sizeStyles = (props: ThemeProps<DefaultTheme>) => `
Expand Down