From 3ff444878d8e5d32028f7b0abee9b2de13f39f87 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:45:30 +0100
Subject: [PATCH] Fixed ComboBox and Dropdown calling onBlur when an option in
 the list is clicked (#4012)

---
 .changeset/smooth-candles-explain.md                      | 6 ++++++
 .../core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx  | 7 +++++++
 .../core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx   | 8 ++++++++
 packages/core/src/combo-box/ComboBox.tsx                  | 4 +++-
 packages/core/src/dropdown/Dropdown.tsx                   | 4 +++-
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/smooth-candles-explain.md

diff --git a/.changeset/smooth-candles-explain.md b/.changeset/smooth-candles-explain.md
new file mode 100644
index 00000000000..13559199e85
--- /dev/null
+++ b/.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.
diff --git a/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx b/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx
index 15f901f45ab..70fec507524 100644
--- a/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx
+++ b/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");
+  });
 });
diff --git a/packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx b/packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx
index 4b4be3f4e19..8932910adf1 100644
--- a/packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx
+++ b/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");
+  });
 });
diff --git a/packages/core/src/combo-box/ComboBox.tsx b/packages/core/src/combo-box/ComboBox.tsx
index 0e41135e1c3..f7e91b41aaa 100644
--- a/packages/core/src/combo-box/ComboBox.tsx
+++ b/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>) => {
diff --git a/packages/core/src/dropdown/Dropdown.tsx b/packages/core/src/dropdown/Dropdown.tsx
index 7cfe11cea71..301d32378ab 100644
--- a/packages/core/src/dropdown/Dropdown.tsx
+++ b/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 = () => {