diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx index d9189c67c0ba..aea5cd30342d 100644 --- a/packages/main/cypress/specs/Input.cy.tsx +++ b/packages/main/cypress/specs/Input.cy.tsx @@ -384,13 +384,13 @@ describe("Input general interaction", () => { it("tests selection-change with custom items", () => { cy.mount( - - - - - + + + + + - ); + ); cy.get("ui5-input") .as("input"); @@ -435,11 +435,11 @@ describe("Input general interaction", () => { it("Should fire 'input' event when the value is cleared with ESC", () => { cy.mount( - ); + ); - cy.get("[ui5-input]").then($input => { - $input[0].addEventListener("ui5-input", cy.spy().as("inputEvent")); - }); + cy.get("[ui5-input]").then($input => { + $input[0].addEventListener("ui5-input", cy.spy().as("inputEvent")); + }); cy.get("[ui5-input]").realClick(); cy.get("[ui5-input]").realPress("a"); @@ -499,13 +499,13 @@ describe("Input arrow navigation", () => { it("Should navigate up and down through the suggestions popover with arrow keys", () => { cy.mount( - - - - - + + + + + - ); + ); cy.get("#myInput2") .as("input"); @@ -551,7 +551,7 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => { beforeEach(() => { cy.mount( - + @@ -564,9 +564,9 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => { - + - ); + ); }); it("Should focus the tenth item from the suggestions popover with PAGEDOWN", () => { cy.get("ui5-input") @@ -626,11 +626,11 @@ describe("Selection-change event", () => { it("Selection-change event fires with null arguments when suggestion was selected but user alters input value to something else", () => { cy.mount( - - - + + + - ); + ); cy.get("ui5-input") .as("input"); @@ -676,6 +676,61 @@ describe("Selection-change event", () => { expect(eventCount).to.equal(2); }); }); + + it("Fires selection-change when same item is reselected after input is changed", () => { + cy.mount( + + + + + + ); + + cy.get("ui5-input") + .as("input"); + + cy.get("ui5-input") + .shadow() + .find("input") + .as("innerInput"); + + cy.get("@input").then($input => { $input[0].addEventListener("ui5-selection-change", cy.stub().as("inputSelectionChange")); }); + + cy.get("@innerInput") + .realClick(); + + cy.get("[ui5-suggestion-item") + .eq(0) + .as("suggestion-item"); + + cy.get("@innerInput") + .type("C"); + + cy.get("@suggestion-item") + .realClick(); + + cy.get("@inputSelectionChange").should("have.been.calledOnce"); + + cy.get("@innerInput") + .should("have.value", "Cozy"); + + cy.get("@innerInput") + .realClick(); + cy.get("@innerInput") + .clear(); + + cy.get("@inputSelectionChange").should("have.been.calledTwice"); + + cy.get("@innerInput") + .type("C"); + cy.get("@suggestion-item") + .realClick(); + + cy.get("@inputSelectionChange").should("have.been.calledThrice"); + + cy.get("@innerInput") + .should("have.value", "Cozy"); + }); }); describe("Change event behavior when selecting the same suggestion item", () => { @@ -684,15 +739,15 @@ describe("Change event behavior when selecting the same suggestion item", () => beforeEach(() => { cy.mount( - + - + - ); + ); cy.get("#myInput") .as("input"); diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 5f3d6abafa12..879b6cba48bf 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1534,6 +1534,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement fireResetSelectionChange() { if (this._isLatestValueFromSuggestions) { this.fireSelectionChange(null, false); + this.valueBeforeItemSelection = this.value; } }