From 32e8dc93410a8da1b74b0e1fabefca11fc179421 Mon Sep 17 00:00:00 2001 From: i518532 Date: Thu, 10 Apr 2025 14:25:51 +0300 Subject: [PATCH 1/3] fix(ui5-input): selection-change is now fired when same item is reselected after input is cleared --- packages/main/cypress/specs/Input.cy.tsx | 58 ++++++++++++++++++++++++ packages/main/src/Input.ts | 1 + 2 files changed, 59 insertions(+) diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx index d9189c67c0ba..6708a4b24cd2 100644 --- a/packages/main/cypress/specs/Input.cy.tsx +++ b/packages/main/cypress/specs/Input.cy.tsx @@ -676,6 +676,64 @@ 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"); + + let eventCount = 0; + + cy.get("@input").then($input => { + $input[0].addEventListener("ui5-selection-change", () => { + eventCount++; + }); + }); + + 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("@innerInput") + .should("have.value", "Cozy"); + + cy.get("@innerInput") + .realClick(); + cy.get("@innerInput") + .clear(); + cy.get("@innerInput") + .type("C"); + cy.get("@suggestion-item") + .realClick(); + + cy.get("@innerInput") + .should("have.value", "Cozy"); + + cy.then(() => { + expect(eventCount).to.equal(3); + }); + }); }); describe("Change event behavior when selecting the same suggestion item", () => { 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; } } From 6cbe474d680cc2d5fdc8a64dd768c21505cf78c4 Mon Sep 17 00:00:00 2001 From: i518532 Date: Tue, 15 Apr 2025 09:48:35 +0300 Subject: [PATCH 2/3] fix(ui5-input): correct test --- packages/main/cypress/specs/Input.cy.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx index 6708a4b24cd2..deada3cd8d2d 100644 --- a/packages/main/cypress/specs/Input.cy.tsx +++ b/packages/main/cypress/specs/Input.cy.tsx @@ -694,13 +694,7 @@ describe("Selection-change event", () => { .find("input") .as("innerInput"); - let eventCount = 0; - - cy.get("@input").then($input => { - $input[0].addEventListener("ui5-selection-change", () => { - eventCount++; - }); - }); + cy.get("@input") .then($input => { $input[0].addEventListener("ui5-change", cy.stub().as("inputChange")); }); cy.get("@innerInput") .realClick(); @@ -730,9 +724,7 @@ describe("Selection-change event", () => { cy.get("@innerInput") .should("have.value", "Cozy"); - cy.then(() => { - expect(eventCount).to.equal(3); - }); + cy.get("@inputChange").should("have.been.calledTwice"); }); }); From 65df51f465567784954009016741bca3d0eb2c93 Mon Sep 17 00:00:00 2001 From: i518532 Date: Tue, 15 Apr 2025 10:49:48 +0300 Subject: [PATCH 3/3] fix(ui5-input): correct test --- packages/main/cypress/specs/Input.cy.tsx | 63 +++++++++++++----------- 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/packages/main/cypress/specs/Input.cy.tsx b/packages/main/cypress/specs/Input.cy.tsx index deada3cd8d2d..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"); @@ -694,7 +694,7 @@ describe("Selection-change event", () => { .find("input") .as("innerInput"); - cy.get("@input") .then($input => { $input[0].addEventListener("ui5-change", cy.stub().as("inputChange")); }); + cy.get("@input").then($input => { $input[0].addEventListener("ui5-selection-change", cy.stub().as("inputSelectionChange")); }); cy.get("@innerInput") .realClick(); @@ -709,6 +709,8 @@ describe("Selection-change event", () => { cy.get("@suggestion-item") .realClick(); + cy.get("@inputSelectionChange").should("have.been.calledOnce"); + cy.get("@innerInput") .should("have.value", "Cozy"); @@ -716,15 +718,18 @@ describe("Selection-change event", () => { .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"); - - cy.get("@inputChange").should("have.been.calledTwice"); }); }); @@ -734,15 +739,15 @@ describe("Change event behavior when selecting the same suggestion item", () => beforeEach(() => { cy.mount( - + - + - ); + ); cy.get("#myInput") .as("input");