diff --git a/src/Drawer/Drawer.test.tsx b/src/Drawer/Drawer.test.tsx
index 3b5d36b1..0444ba24 100644
--- a/src/Drawer/Drawer.test.tsx
+++ b/src/Drawer/Drawer.test.tsx
@@ -215,6 +215,45 @@ describe('Drawer', () => {
});
});
+ it('calls onRequestClose when closeOnOverlayClick is not defined', async () => {
+ const onRequestClose = jest.fn();
+
+ const { container } = render(
+ ,
+ );
+
+ const [overlay] = Array.from(container.getElementsByClassName('DrawerBackgroundOverlay'));
+
+ userEvent.click(overlay);
+
+ await waitFor(() => {
+ expect(onRequestClose).toHaveBeenCalled();
+ });
+ });
+
+ it('does not call onRequestClose when closeOnOverlayClick is set to false', async () => {
+ const onRequestClose = jest.fn();
+
+ const { container } = render(
+ ,
+ );
+
+ const [overlay] = Array.from(container.getElementsByClassName('DrawerBackgroundOverlay'));
+
+ userEvent.click(overlay);
+
+ await waitFor(() => {
+ expect(onRequestClose).not.toHaveBeenCalled();
+ });
+ });
+
it('body tag has Drawer--open', () => {
const { container } = render();
const body = container.closest('body');
diff --git a/src/Drawer/Drawer.tsx b/src/Drawer/Drawer.tsx
index 6af6b08f..71910f8b 100644
--- a/src/Drawer/Drawer.tsx
+++ b/src/Drawer/Drawer.tsx
@@ -28,6 +28,7 @@ type DrawerProps = {
behindNav?: boolean;
children?: React.ReactNode;
className?: string;
+ closeOnOverlayClick?: boolean;
defaultExpanded?: boolean;
expandable?: boolean;
hasBackgroundOverlay?: boolean;
@@ -42,6 +43,7 @@ function Drawer({
children,
className = '',
defaultExpanded = false,
+ closeOnOverlayClick = true,
expandable = false,
hasBackgroundOverlay = true,
visible,
@@ -122,7 +124,7 @@ function Drawer({
})
}
role="presentation"
- onClick={onRequestClose}
+ onClick={closeOnOverlayClick ? onRequestClose : undefined}
onKeyDown={handleEscKeyPress}
/>
)