close the Dropdown menu when pressing the split button

cengage · Jan 24, 2025 · 1209baa · 1209baa
1 parent bc8b97e
commit 1209baa
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx
@@ -59,6 +59,7 @@ export const DropdownSplitButton = React.forwardRef<
   } = resolvedProps;
 
   const ref = useForkedRef(forwardedRef, resolvedContext.toggleRef);
+  const splitButtonRef = React.useRef<HTMLButtonElement>(null);
 
   resolvedContext.dropdownButtonId.current = useGenerateId(id);
 
@@ -70,12 +71,12 @@ export const DropdownSplitButton = React.forwardRef<
         aria-hidden="true"
       />
     ) : (
-      <ArrowDropDownIcon
-        size={theme.iconSizes.medium}
-        testId="caretDown"
-        aria-hidden="true"
-      />
-    );
+        <ArrowDropDownIcon
+          size={theme.iconSizes.medium}
+          testId="caretDown"
+          aria-hidden="true"
+        />
+      );
 
   function handleClick(event: React.SyntheticEvent) {
     if (resolvedContext.isOpen) {
@@ -85,6 +86,15 @@ export const DropdownSplitButton = React.forwardRef<
     }
   }
 
+  function handleButtonClick(event: React.SyntheticEvent) {
+    onClick?.();
+
+    if (resolvedContext.isOpen) {
+      resolvedContext.closeDropdown(event);
+      splitButtonRef.current?.focus();
+    }
+  }
+
   const i18n = React.useContext(I18nContext);
 
   function buildIconButtonStyles(props) {
@@ -103,11 +113,12 @@ export const DropdownSplitButton = React.forwardRef<
         {...other}
         id={resolvedContext.dropdownButtonId.current}
         isInverse={resolvedContext.isInverse}
-        onClick={onClick}
+        onClick={handleButtonClick}
         shape={ButtonShape.leftCap}
         style={{ borderRight: 0, marginRight: 0 }}
         variant={variant}
         tabIndex={0}
+        ref={splitButtonRef}
       >
         {children}
       </Button>