diff --git a/packages/main/cypress/specs/SplitButton.cy.tsx b/packages/main/cypress/specs/SplitButton.cy.tsx index b6fb669c875d..86157200cd04 100644 --- a/packages/main/cypress/specs/SplitButton.cy.tsx +++ b/packages/main/cypress/specs/SplitButton.cy.tsx @@ -123,6 +123,50 @@ describe("Split Button general interaction", () => { .should("have.not.been.called"); }); + it("tests arrow button 'arrow-click' event (Space up)", () => { + cy.mount(Default); + + cy.get("[ui5-split-button]") + .shadow() + .find(".ui5-split-arrow-button") + .focus() + .should("be.focused") + .then(($btn) => { + const el = $btn[0] as Element; + const kd = new KeyboardEvent("keydown", { + key: " ", + code: "Space", + keyCode: 32, + which: 32, + bubbles: true, + cancelable: true, + }); + el.dispatchEvent(kd); + }); + + cy.get("@arrowClicked") + .should("not.have.been.called"); + + cy.get("[ui5-split-button]") + .shadow() + .find(".ui5-split-arrow-button") + .then(($btn) => { + const el = $btn[0] as Element; + const ku = new KeyboardEvent("keyup", { + key: " ", + code: "Space", + keyCode: 32, + which: 32, + bubbles: true, + cancelable: true, + }); + el.dispatchEvent(ku); + }); + + cy.get("@arrowClicked") + .should("have.been.calledOnce"); + }); + it("tests arrow button aria attributes", () => { cy.mount( <> diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index f7c8f5f013b0..4e3fc073d3cc 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -321,8 +321,12 @@ class SplitButton extends UI5Element { e.preventDefault(); e.stopPropagation(); this._textButtonActive = false; - if (!this._shiftOrEscapePressedDuringSpace && target !== this.arrowButton) { // Do not fire click if Arrow button is focused by mouse and Space is pressed afterwards - this._fireClick(); + if (!this._shiftOrEscapePressedDuringSpace) { // Do not fire click if Arrow button is focused by mouse and Space is pressed afterwards + if (target !== this.arrowButton) { + this._fireClick(); + } else { + this._fireArrowClick(); + } } this._shiftOrEscapePressedDuringSpace = false; @@ -422,15 +426,14 @@ class SplitButton extends UI5Element { e.preventDefault(); const target = e.target as Button; - if (this.arrowButton && target === this.arrowButton) { - this._activeArrowButton = true; - this._fireArrowClick(); - return; - } - - this._textButtonActive = true; - if (isEnter(e)) { + if (this.arrowButton && target === this.arrowButton) { + this._activeArrowButton = true; + this._fireArrowClick(); + return; + } + + this._textButtonActive = true; this._fireClick(e); return; }