fix(ui5-input): call change before submit event

FIXES: #10534
SAP · Jan 21, 2025 · 3ba97bd · 3ba97bd
1 parent 491538b
commit 3ba97bd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts
@@ -128,4 +128,39 @@ describe("Input Tests", () => {
 			.find("ul")
 			.should("not.have.attr", "tabindex", "0");
 	});
+
+	it("tests submit and change event order", () => {
+		cy.mount(html`
+			<form>
+				<ui5-input />
+			</form>
+		`);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+	});
 });
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -581,7 +581,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	_handleResizeBound: ResizeObserverCallback;
 	_keepInnerValue: boolean;
 	_shouldAutocomplete?: boolean;
-	_keyDown?: boolean;
+	_enterKeyDown?: boolean;
 	_isKeyNavigation?: boolean;
 	Suggestions?: InputSuggestions;
 	_selectedText?: string;
@@ -780,6 +780,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		}
 
 		if (isEnter(e)) {
+			this._enterKeyDown = true;
 			return this._handleEnter(e);
 		}
 
@@ -807,7 +808,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 			this._clearPopoverFocusAndSelection();
 		}
 
-		this._keyDown = true;
 		this._isKeyNavigation = false;
 	}
 
@@ -818,7 +818,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 			this.value = (e.target as HTMLInputElement).value;
 		}
 
-		this._keyDown = false;
+		this._enterKeyDown = false;
 	}
 
 	_handleUp(e: KeyboardEvent) {
@@ -871,10 +871,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		if (!suggestionItemPressed) {
 			this.lastConfirmedValue = this.value;
 
-			if (this._internals.form) {
-				submitForm(this);
-			}
-
 			return;
 		}
 
@@ -1025,6 +1021,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 				this._changeToBeFired = true;
 			} else {
 				fireChange();
+
+				if (this._enterKeyDown && this._internals.form) {
+					submitForm(this);
+				}
 			}
 		}
 	}