fix(ui5-input): remove the 'submit' event

packages/main/src/Input.js

@@ -372,18 +372,6 @@ const metadata = {
 		 */
 		input: {},
 
-		/**
-		 * Fired when user presses Enter key on the <code>ui5-input</code>.
-		 * <br><br>
-		 * <b>Note:</b> The event is fired independent of whether there was a change before or not.
-		 * If change was performed, the event is fired after the change event.
-		 * The event is also fired when an item of the select list is selected by pressing Enter.
-		 *
-		 * @event
-		 * @public
-		 */
-		submit: {},
-
 		/**
 		 * Fired when a suggestion item, that is displayed in the suggestion popup, is selected.
 		 *
@@ -520,7 +508,6 @@ class Input extends UI5Element {
 		this.highlightValue = "";
 
 		// all sementic events
-		this.EVENT_SUBMIT = "submit";
 		this.EVENT_CHANGE = "change";
 		this.EVENT_INPUT = "input";
 		this.EVENT_SUGGESTION_ITEM_SELECT = "suggestion-item-select";
@@ -884,7 +871,6 @@ class Input extends UI5Element {
 		}
 
 		const inputValue = await this.getInputValue();
-		const isSubmit = action === this.ACTION_ENTER;
 		const isUserInput = action === this.ACTION_USER_INPUT;
 
 		const input = await this.getInputDOMRef();
@@ -909,13 +895,9 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (isSubmit) { // submit
-			this.fireEvent(this.EVENT_SUBMIT);
-		}
-
 		// In IE, pressing the ENTER does not fire change
 		const valueChanged = (this.previousValue !== undefined) && (this.previousValue !== this.value);
-		if (isIE() && isSubmit && valueChanged) {
+		if (isIE() && action === this.ACTION_ENTER && valueChanged) {
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}

packages/main/src/StepInput.hbs

@@ -42,7 +42,6 @@
 			._inputAccInfo ="{{accInfo}}"
 			._nativeInputAttributes="{{inputAttributes}}"
 			@ui5-change="{{_onInputChange}}"
-			@ui5-submit="{{_onInputChange}}"
 			@focusout="{{_onInputFocusOut}}"
 			@focusin="{{_onInputFocusIn}}"
 	>

packages/main/src/StepInput.js

@@ -11,6 +11,7 @@ import {
 	isPageUpShift,
 	isPageDownShift,
 	isEscape,
+	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -566,6 +567,11 @@ class StepInput extends UI5Element {
 			return;
 		}
 
+		if (isEnter(event)) {
+			this._onInputChange();
+			return;
+		}
+
 		if (isUp(event)) {
 			// step up
 			this._modifyValue(this.step);

packages/main/test/pages/Input.html

@@ -18,7 +18,6 @@
 	<h3> Input with suggestions: type 'a'</h3>
 	<ui5-label id="myLabel">Event [suggestionItemSelect] :: N/A</ui5-label><br/>
 	<ui5-label id="myLabelChange">Event [change] :: N/A</ui5-label><br/>
-	<ui5-label id="myLabelSubmit">Event [submit] :: N/A</ui5-label><br/>
 	<ui5-label id="myLabelLiveChange">Event [input] :: N/A</ui5-label><br/>
 
 	<div>
@@ -220,6 +219,11 @@ <h3> Input with multiple icons</h3>
 		<ui5-icon slot="icon" name="decline" style="padding-left: 8px; padding-right: 8px"></ui5-icon>
 	</ui5-input>
 
+	<h3> Input firing submit event and submit action on 'ENTER' in a form</h3>
+	<form id="submit-form">
+		<ui5-input id="submit-input" name="my-submit-input" placeholder="Type something and press 'ENTER' ..."></ui5-input>
+	</form>
+
 	<h3> Test scroll pos</h3>
 	<ui5-input id="scrollInput" show-suggestions>
 		<ui5-li>Cozy</ui5-li>
@@ -318,6 +322,29 @@ <h3>Short Input With Centered Text</h3>
 	</style>
 
 	<script>
+		document.getElementById("submit-input").addEventListener("keypress", function(event) {
+			if (event.key === 'Enter') {
+				var formToSubmit = document.getElementById("submit-form");
+				var submitEvent = new Event('submit');
+
+				/* The old way - supported by all browsers:
+				The submit method of the form won't trigger
+				a submit event by itself, dispatch it manually */
+
+				// formToSubmit.dispatchEvent(submitEvent);
+				// formToSubmit.submit();
+
+				// Fires submit event and submits
+				// No MS IE11 & Safari support yet
+				formToSubmit.requestSubmit()
+			}
+		});
+
+		document.getElementById("submit-form").addEventListener("submit", function(event) {
+			event.preventDefault();
+			alert("Submitted");
+		});
+
 		btnOpenDialog.addEventListener("click", function () {
 			dialog.open();
 		});
@@ -335,7 +362,6 @@ <h3>Short Input With Centered Text</h3>
 		var label = document.getElementById('myLabel');
 		var labelChange = document.getElementById('myLabelChange');
 		var labelLiveChange = document.getElementById('myLabelLiveChange');
-		var labelSubmit = document.getElementById('myLabelSubmit');
 
 		var suggestionSelectedCounterWithGrouping = 0;
 
@@ -390,10 +416,6 @@ <h3>Short Input With Centered Text</h3>
 			labelChange.innerHTML = "Event [change] :: " + event.target.value;
 		});
 
-		input.addEventListener("ui5-submit", function (event) {
-			labelSubmit.innerHTML = "Event [submit] :: " + event.target.value;
-		});
-
 		var changeCounter = 0;
 		var inputCounter = 0;
 		var suggestionSelectedCounter = 0;
@@ -416,9 +438,6 @@ <h3>Short Input With Centered Text</h3>
 
 		var inputChangeResultCounter = 0;
 
-		inputChange.addEventListener("ui5-submit", function (event) {
-			inputChange.value = "Changed via API";
-		});
 		inputChange.addEventListener("ui5-change", function (event) {
 			inputChangeResult.value = ++inputChangeResultCounter;
 		});