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

The 'submit' event fired from the ui5-input component is now removed as it is an event of the 'form' element and not of the input ones. From now on, the submit (event) must be triggered manually when enter key is pressed.

BREAKING CHANGE: the 'submit' event is now removed. The 'submit' functionality must be added with a custom code - listen for the standard "keydown" event and check if ENTER is pressed to submit a form, containing the input component.

Author: ndeshev

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.
 		 *
@@ -521,7 +509,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";
@@ -885,7 +872,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();
@@ -910,13 +896,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;
 		});