fix(drawer): handle clickoutside on slower active boolean (#1621)

* fix(drawer): handle clickoutside on slower active boolean

* test: drawer opens on click

src/components/Drawer/Drawer.test.tsx

@@ -0,0 +1,27 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import { composeStories } from '@storybook/testing-react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import * as stories from './Drawer.stories';
+const { DefaultInteractive } = composeStories(stories);
+
+describe('<Drawer />', () => {
+  generateSnapshots(stories, {
+    getElement: async () => {
+      const filters = await screen.findByRole('dialog');
+      return filters.parentElement; // eslint-disable-line testing-library/no-node-access
+    },
+  });
+
+  it('shows the dialog when the open dialog button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DefaultInteractive />);
+    const openDrawerButton = await screen.findByRole('button', {
+      name: 'Open Drawer',
+    });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await user.click(openDrawerButton);
+    expect(screen.getByRole('dialog')).toBeTruthy();
+  });
+});

src/components/Drawer/Drawer.tsx

@@ -142,7 +142,7 @@ export const Drawer = ({
   useEffect(() => {
     function handleOnClickOutside(e: MouseEvent) {
       if (
-        isActive &&
+        activeFocus &&
         dismissible &&
         windowRef.current &&
         !windowRef.current.contains(e.target as HTMLElement)
@@ -157,7 +157,7 @@ export const Drawer = ({
     return () => {
       document.removeEventListener('click', handleOnClickOutside);
     };
-  }, [isActive, dismissible, handleOnClose, windowRef]);
+  }, [activeFocus, dismissible, handleOnClose, windowRef]);
 
   /**
    * If escape button is struck, close the drawer