Add optional disabling of drawer close on background overlay click

user-interviews · Aug 19, 2024 · abea7ff · abea7ff
1 parent e362cc0
commit abea7ff
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git 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(
+          <SetupDrawerWithChildren
+            visible
+            onRequestClose={onRequestClose}
+          />,
+        );
+
+        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(
+          <SetupDrawerWithChildren
+            closeOnOverlayClick={false}
+            visible
+            onRequestClose={onRequestClose}
+          />,
+        );
+
+        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(<SetupDrawerWithChildren visible />);
         const body = container.closest('body');

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