feat(ui5-input): enable preventing input event (#9930)

FIXES: #9884

Author: MapTo0

packages/main/src/Input.ts

@@ -221,6 +221,7 @@ type InputSuggestionScrollEventDetail = {
 /**
  * Fired when the value of the component changes at each keystroke,
  * and when a suggestion item has been selected.
+ * @allowPreventDefault
  * @public
  */
 @event("input")
@@ -1014,8 +1015,15 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	_clear() {
+		const valueBeforeClear = this.value;
 		this.value = "";
-		this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType: "" });
+		const prevented = !this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType: "" }, true);
+
+		if (prevented) {
+			this.value = valueBeforeClear;
+			return;
+		}
+
 		if (!this._isPhone) {
 			this.fireResetSelectionChange();
 			this.focus();
@@ -1275,6 +1283,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	fireEventByAction(action: INPUT_ACTIONS, e: InputEvent) {
+		const valueBeforeInput = this.value;
+		const inputRef = this.getInputDOMRefSync();
+
 		if (this.disabled || this.readonly) {
 			return;
 		}
@@ -1288,7 +1299,13 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 		if (isUserInput) { // input
 			const inputType = e.inputType || "";
-			this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType });
+			const prevented = !this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType }, true);
+
+			if (prevented) {
+				this.value = valueBeforeInput;
+				inputRef && (inputRef.value = valueBeforeInput);
+			}
+
 			// Angular two way data binding
 			this.fireEvent("value-changed");
 			this.fireResetSelectionChange();

packages/main/test/pages/Input.html

@@ -519,6 +519,11 @@ <h3>Input - open suggestions picker</h3>
 
 	<ui5-button id="dynamic-value-state-trigger">Trigger dynamic value state</ui5-button>
 
+	<br>
+
+	<ui5-input id="prevent-input-event"></ui5-input>
+	<ui5-input id="prevent-input-event-clear-icon" value="Test" show-clear-icon></ui5-input>
+
 	<script>
 		const dynamicValueState = document.getElementById("dynamic-value-state");
 		const dynamicValueStateTrigger = document.getElementById("dynamic-value-state-trigger");
@@ -1057,6 +1062,16 @@ <h3>Input - open suggestions picker</h3>
 			inputNumber3ChangeCount.value = (parseInt(inputNumber3ChangeCount.value) + 1).toString();
 		});
 
+		document.getElementById("prevent-input-event").addEventListener("ui5-input", event => {
+			if (event.target.value.length > 3) {
+				event.preventDefault();
+			}
+		});
+
+		document.getElementById("prevent-input-event-clear-icon").addEventListener("ui5-input", event => {
+			event.preventDefault();
+		});
+
 	</script>
 </body>
 

packages/main/test/specs/Input.spec.js

@@ -1196,6 +1196,30 @@ describe("Input general interaction", () => {
 		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once");
 		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
 	});
+
+	it("Tests prevented input event", async () => {
+		const input = await $("#prevent-input-event");
+		const innerInput = await input.shadow$("input");
+
+		await input.click();
+		
+		await innerInput.keys("a");
+		await innerInput.keys("b");
+		await innerInput.keys("c");
+		await innerInput.keys("d");
+
+		// forth input should be prevented
+		assert.strictEqual(await input.getValue(), "abc", "The value is correct");
+	});
+
+	it("Tests prevented input event with clear icon", async () => {
+		const input = await $("#prevent-input-event-clear-icon");
+		const clearIcon = await input.shadow$(".ui5-input-clear-icon-wrapper");
+
+		await clearIcon.click();
+
+		assert.strictEqual(await input.getValue(), "Test", "The value is not cleared");
+	});
 });
 
 describe("Input arrow navigation", () => {