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} /> )