fix(component): dropdown items click not firing inside modal (#1779)

Author: golcinho

.changeset/heavy-llamas-join.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/big-design": patch
+---
+
+fix(component): dropdown items click not firing inside modal

packages/big-design/src/components/Dropdown/spec.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import 'jest-styled-components';
 
 import { Button } from '../Button';
+import { Modal } from '../Modal';
 
 import { Dropdown } from './';
 
@@ -684,3 +685,20 @@ test("dropdown toggle doesn't trigger onItemClick", async () => {
 
   expect(onItemClick).not.toHaveBeenCalled();
 });
+
+test('dropdown onItemClick triggers inside a modal', async () => {
+  onItemClick.mockClear();
+
+  render(<Modal isOpen={true}>{DropdownMock}</Modal>);
+
+  const toggle = await screen.findByRole('button', { name: 'Button' });
+
+  await userEvent.click(toggle);
+
+  const options = await screen.findAllByRole('option');
+
+  await userEvent.click(options[1]);
+
+  expect(onItemClick).toHaveBeenCalledTimes(1);
+  expect(onItemClick).toHaveBeenCalledWith({ content: 'Option 2', onItemClick });
+});

packages/big-design/src/components/Modal/Modal.tsx

@@ -96,7 +96,23 @@ const InternalModal: React.FC<ModalProps> = ({
   // Setup focus-trap
   useEffect(() => {
     if (modalRef && internalTrap.current === null) {
-      internalTrap.current = createFocusTrap(modalRef, { fallbackFocus: modalRef });
+      internalTrap.current = createFocusTrap(modalRef, {
+        allowOutsideClick: (event) => {
+          const target = event.target;
+
+          // Allow clicks on portaled menu/listbox elements (e.g., Dropdown, Select)
+          /* istanbul ignore next */
+          if (target instanceof Element) {
+            return (
+              target.closest('[role="menu"]') !== null ||
+              target.closest('[role="listbox"]') !== null
+            );
+          }
+
+          return false;
+        },
+        fallbackFocus: modalRef,
+      });
       internalTrap.current.activate();
     }