fix(ui5-input): selection-change is now fired when item is reselected (#11301)

Author: ivoplashkov

packages/main/cypress/specs/Input.cy.tsx

@@ -384,13 +384,13 @@ describe("Input general interaction", () => {
 	it("tests selection-change with custom items", () => {
 		cy.mount(
 			<Input id="myInput2" showSuggestions class="input3auto">
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		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(
 			<Input></Input>
-		  );
+		);
 
-		  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(
 			<Input id="myInput2" showSuggestions class="input3auto">
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		cy.get("#myInput2")
 			.as("input");
@@ -551,7 +551,7 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
 	beforeEach(() => {
 		cy.mount(
 			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
-			  <SuggestionItemGroup headerText="A">
+				<SuggestionItemGroup headerText="A">
 					<SuggestionItem text="Afghanistan" />
 					<SuggestionItem text="Argentina" />
 					<SuggestionItem text="Albania" />
@@ -564,9 +564,9 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
 					<SuggestionItem text="Azerbaijan" />
 					<SuggestionItem text="Aruba" />
 					<SuggestionItem text="Antigua and Barbuda" />
-			  </SuggestionItemGroup>
+				</SuggestionItemGroup>
 			</Input>
-		  );
+		);
 	});
 	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(
 			<Input id="input-selection-change" showSuggestions>
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		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(
+			<Input id="input-selection-change" showSuggestions>
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+			</Input>
+		);
+
+		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(
 			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
-			  <SuggestionItemGroup headerText="A">
+				<SuggestionItemGroup headerText="A">
 					<SuggestionItem text="Afghanistan" />
 					<SuggestionItem text="Argentina" />
 					<SuggestionItem text="Albania" />
 					<SuggestionItem text="Armenia" />
 					<SuggestionItem text="Algeria" />
-			  </SuggestionItemGroup>
+				</SuggestionItemGroup>
 			</Input>
-		  );
+		);
 
 		cy.get("#myInput")
 			.as("input");

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;
 		}
 	}