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(); + 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(); + 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( const handleBlur = (event: FocusEvent) => { event.persist(); - onBlur?.(event); + if (!listRef.current || !listRef.current.contains(event.relatedTarget)) { + onBlur?.(event); + } }; const handleChange = (event: ChangeEvent) => { 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( const handleBlur = (event: FocusEvent) => { setFocusedState(false); - onBlur?.(event); + if (!listRef.current || !listRef.current.contains(event.relatedTarget)) { + onBlur?.(event); + } }; const handleListMouseOver = () => {