fix(dropdown): Fix the dropdown closing on the second button click in… (

#1460)
cengage · Sep 30, 2024 · d109847 · d109847 · github-actions · Sep 30, 2024
1 parent 5783946
commit d109847
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/.changeset/dropdown-safari.md b/.changeset/dropdown-safari.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(dropdown): Fix the dropdown closing on the second button click in `Safari`
diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
@@ -350,7 +350,7 @@ describe('Dropdown', () => {
 
     expect(getByTestId('dropdownContent')).toHaveStyleRule('display', 'block');
 
-    userEvent.click(document.body);
+    fireEvent.blur(getByText('Toggle me'));
 
     act(jest.runAllTimers);
 
@@ -785,7 +785,7 @@ describe('Dropdown', () => {
         'block'
       );
 
-      userEvent.click(document.body);
+      fireEvent.blur(getByText('Toggle me'));
       act(jest.runAllTimers);
 
       expect(onClose).toHaveBeenCalled();

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx
@@ -122,6 +122,11 @@ export const DropdownButton = React.forwardRef<
     }
   }
 
+  // Necessary for the proper opening and closing of the menu in Safari
+  function handleMouseDown(event: React.MouseEvent) {
+    event.preventDefault();
+  }
+
   const iconPositionToUse = props.icon
     ? iconPosition
       ? iconPosition
@@ -141,6 +146,7 @@ export const DropdownButton = React.forwardRef<
         id={context.dropdownButtonId.current}
         isInverse={context.isInverse}
         onClick={handleClick}
+        onMouseDown={handleMouseDown}
         ref={ref}
         theme={theme}
       >

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx
@@ -77,10 +77,18 @@ export const DropdownSplitButton = React.forwardRef<
     }
   }
 
+  // Necessary for the proper opening and closing of the menu in Safari
+  function handleMouseDown(event: React.MouseEvent) {
+    event.preventDefault();
+  }
+
   const i18n = React.useContext(I18nContext);
 
   function buildIconButtonStyles(props) {
-    if (props.color === ButtonColor.secondary || props.color === ButtonColor.subtle) {
+    if (
+      props.color === ButtonColor.secondary ||
+      props.color === ButtonColor.subtle
+    ) {
       return '0';
     }
     return theme.spaceScale.spacing01;
@@ -107,6 +115,7 @@ export const DropdownSplitButton = React.forwardRef<
         icon={buttonIcon}
         isInverse={resolvedContext.isInverse}
         onClick={handleClick}
+        onMouseDown={handleMouseDown}
         shape={ButtonShape.rightCap}
         style={{
           marginLeft: buildIconButtonStyles(resolvedProps),