From bd25a615c04f5b3df52fbd8501a81c82ec52341b Mon Sep 17 00:00:00 2001
From: anastasialanz <anastasia.lanz@deque.com>
Date: Thu, 3 Oct 2024 13:58:50 -0500
Subject: [PATCH] fix: close the options menu if clicking on trigger

---
 .../react/src/components/OptionsMenu/OptionsMenu.test.tsx  | 2 +-
 packages/react/src/components/OptionsMenu/OptionsMenu.tsx  | 3 ++-
 .../react/src/components/OptionsMenu/OptionsMenuList.tsx   | 7 +++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx
index 5f100b004..3ebf796e5 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx
@@ -113,7 +113,7 @@ test('should toggle menu on trigger clicks', async () => {
     </OptionsMenu>
   );
 
-  const button = screen.getByRole('button');
+  const button = screen.getByRole('button', { name: 'trigger' });
 
   await user.click(button);
   expect(button).toHaveAttribute('aria-expanded', 'true');
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
index 1072c6dca..8efb3fd29 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import OptionsMenuWrapper from './OptionsMenuWrapper';
 import OptionsMenuList from './OptionsMenuList';
 import setRef from '../../utils/setRef';
@@ -73,6 +73,7 @@ const OptionsMenu = ({
           onKeyDown: handleTriggerKeyDown
         })}
       <OptionsMenuList
+        triggerRef={triggerRef}
         show={show}
         menuRef={(el) => {
           if (menuRef) {
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
index 82f7c8fba..ee63ddf8e 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
@@ -9,6 +9,7 @@ const [up, down, tab, enter, space, esc] = [38, 40, 9, 13, 32, 27];
 export interface OptionsMenuListProps
   extends Omit<OptionsMenuProps, 'trigger'> {
   className?: string;
+  triggerRef: React.RefObject<HTMLButtonElement>;
 }
 
 const OptionsMenuList = ({
@@ -16,6 +17,7 @@ const OptionsMenuList = ({
   menuRef,
   show,
   className,
+  triggerRef,
   onClose = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
   onSelect = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
   closeOnSelect = true,
@@ -96,6 +98,11 @@ const OptionsMenuList = ({
   };
 
   const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+    const target = e.target as Node;
+    const triggerElement = triggerRef.current;
+    if (target === triggerElement || triggerElement?.contains(target)) {
+      return;
+    }
     if (show) {
       onClose();
     }