Fixed ComboBox and Dropdown calling onBlur when an option in the list…

… is clicked (#4012)

.changeset/smooth-candles-explain.md

@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": patch
+---
+
+- Fixed ComboBox calling onBlur when an option in the list is clicked.
+- Fixed Dropdown calling onBlur when an option in the list is clicked.

packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx

@@ -723,4 +723,11 @@ describe("Given a ComboBox", () => {
     );
     cy.findByRole("combobox").should("have.value", "Alaska");
   });
+  it("should not call onBlur when an option in the list is clicked", () => {
+    const blurSpy = cy.stub().as("blurSpy");
+    cy.mount(<Default onBlur={blurSpy} />);
+    cy.findByRole("combobox").realClick();
+    cy.findAllByRole("option").eq(0).realClick();
+    cy.get("@blurSpy").should("not.have.been.called");
+  });
 });

packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx

@@ -465,4 +465,12 @@ describe("Given a Dropdown", () => {
 
     cy.findByTestId(FLOATING_TEST_ID).should("exist");
   });
+
+  it("should not call onBlur when an option in the list is clicked", () => {
+    const blurSpy = cy.stub().as("blurSpy");
+    cy.mount(<Default onBlur={blurSpy} />);
+    cy.findByRole("combobox").realClick();
+    cy.findAllByRole("option").eq(0).realClick();
+    cy.get("@blurSpy").should("not.have.been.called");
+  });
 });

packages/core/src/combo-box/ComboBox.tsx

@@ -300,7 +300,9 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     event.persist();
-    onBlur?.(event);
+    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {
+      onBlur?.(event);
+    }
   };
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

packages/core/src/dropdown/Dropdown.tsx

@@ -356,7 +356,9 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
 
   const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {
     setFocusedState(false);
-    onBlur?.(event);
+    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {
+      onBlur?.(event);
+    }
   };
 
   const handleListMouseOver = () => {