refactor(ui5-input): fire input, instead of liveChange (#159)

Fires 'input' event upon user typing, instead of the 'liveChange' event.

BREAKING CHANGE: liveChange event is no longer fired, listen for the input event instead.

Author: ilhan007

packages/main/src/DatePicker.hbs

@@ -12,7 +12,7 @@
 			?readonly="{{ctr.readonly}}"
 			value-state="{{ctr.valueState}}"
 			@change="{{ctr._input.onChange}}"
-			@liveChange="{{ctr._input.onLiveChange}}"
+			@input="{{ctr._input.onLiveChange}}"
 			data-sap-focus-ref
 	>
 		{{#if showIcon}}

packages/main/src/Input.hbs

@@ -14,6 +14,7 @@
 			?readonly="{{_readonly}}"
 			.value="{{ctr.value}}"
 			placeholder="{{ctr.placeholder}}"
+			@input="{{ctr._input.onInput}}"
 			data-sap-no-tab-ref
 			data-sap-focus-ref
 	/>

packages/main/src/Input.js

@@ -180,6 +180,10 @@ const metadata = {
 			type: Boolean,
 		},
 
+		_input: {
+			type: Object,
+		},
+
 		_popover: {
 			type: Object,
 		},
@@ -200,7 +204,7 @@ const metadata = {
 		 * @event
 		 * @public
 		 */
-		liveChange: {},
+		input: {},
 
 		/**
 		 * Fired when user presses Enter key on the <code>ui5-input</code>.
@@ -288,7 +292,7 @@ class Input extends WebComponent {
 		this.previousValue = undefined;
 
 		// Represents the value before user moves selection between the suggestion items.
-		// Used to register and fire "liveChange" event upon [SPACE] or [ENTER].
+		// Used to register and fire "input" event upon [SPACE] or [ENTER].
 		// Note: the property "value" is updated upon selection move and can`t be used.
 		this.valueBeforeItemSelection = "";
 
@@ -298,15 +302,19 @@ class Input extends WebComponent {
 		// all sementic events
 		this.EVENT_SUBMIT = "submit";
 		this.EVENT_CHANGE = "change";
-		this.EVENT_LIVE_CHANGE = "liveChange";
+		this.EVENT_INPUT = "input";
 		this.EVENT_SUGGESTION_ITEM_SELECT = "suggestionItemSelect";
 
 		// all user interactions
-		this.ACTION_INPUT = "input";
 		this.ACTION_ENTER = "enter";
 		this.ACTION_FOCUSOUT = "focusOut";
+		this.ACTION_USER_INPUT = "input";
 
-		this._whenShadowRootReady().then(this.attachFocusHandler.bind(this));
+		this._input = {
+			onInput: this._onInput.bind(this),
+		};
+
+		this._whenShadowRootReady().then(this.attachFocusHandlers.bind(this));
 	}
 
 	onBeforeRendering() {
@@ -393,8 +401,13 @@ class Input extends WebComponent {
 		this._focused = false; // invalidating property
 	}
 
-	oninput() {
-		this.fireEventByAction(this.ACTION_INPUT);
+	_onInput(event) {
+		if (event.target === this.getInputDOMRef()) {
+			// stop the native event, as the semantic "input" would be fired.
+			event.stopImmediatePropagation();
+		}
+
+		this.fireEventByAction(this.ACTION_USER_INPUT);
 		this.hasSuggestionItemSelected = false;
 
 		if (this.Suggestions) {
@@ -403,7 +416,7 @@ class Input extends WebComponent {
 	}
 
 	/* Private Methods */
-	attachFocusHandler() {
+	attachFocusHandlers() {
 		this.shadowRoot.addEventListener("focusout", this.onfocusout.bind(this));
 		this.shadowRoot.addEventListener("focusin", this.onfocusin.bind(this));
 	}
@@ -430,17 +443,17 @@ class Input extends WebComponent {
 
 	selectSuggestion(item, keyboardUsed) {
 		const itemText = item._nodeText;
-		const fireLiveChange = keyboardUsed
+		const fireInput = keyboardUsed
 			? this.valueBeforeItemSelection !== itemText : this.value !== itemText;
 
 		item.selected = false;
 		this.hasSuggestionItemSelected = true;
 		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
 
-		if (fireLiveChange) {
+		if (fireInput) {
 			this.value = itemText;
 			this.valueBeforeItemSelection = itemText;
-			this.fireEvent(this.EVENT_LIVE_CHANGE);
+			this.fireEvent(this.EVENT_INPUT);
 		}
 	}
 
@@ -457,14 +470,14 @@ class Input extends WebComponent {
 		const inputValue = this.getInputValue();
 		const isSubmit = action === this.ACTION_ENTER;
 		const isFocusOut = action === this.ACTION_FOCUSOUT;
-		const isInput = action === this.ACTION_INPUT;
+		const isUserInput = action === this.ACTION_USER_INPUT;
 
 		this.value = inputValue;
 
 		const valueChanged = (this.previousValue !== undefined) && (this.previousValue !== this.value);
 
-		if (isInput) { // liveChange
-			this.fireEvent(this.EVENT_LIVE_CHANGE);
+		if (isUserInput) { // input
+			this.fireEvent(this.EVENT_INPUT);
 			return;
 		}
 

packages/main/test/sap/ui/webcomponents/main/pages/Input.html

@@ -17,7 +17,7 @@ <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 [liveChange] :: N/A</ui5-label><br/>
+	<ui5-label id="myLabelLiveChange">Event [input] :: N/A</ui5-label><br/>
 
 	<ui5-input id="myInput"
 		style="width:100%"
@@ -88,7 +88,7 @@ <h3> Input type 'URL'</h3>
 		var labelLiveChange = document.getElementById('myLabelLiveChange');
 		var labelSubmit = document.getElementById('myLabelSubmit');
 
-		input.addEventListener("liveChange", function (event) {
+		input.addEventListener("input", function (event) {
 			var value = event.target.value;
 			var suggestionItems = [];
 
@@ -110,7 +110,7 @@ <h3> Input type 'URL'</h3>
 				input.appendChild(li);
 			});
 
-			labelLiveChange.innerHTML = "Event [liveChange] :: " + value;
+			labelLiveChange.innerHTML = "Event [input] :: " + value;
 		});
 
 		input.addEventListener("suggestionItemSelect", function (event) {
@@ -129,17 +129,17 @@ <h3> Input type 'URL'</h3>
 		});
 
 		var changeCounter = 0;
-		var liveChangeCounter = 0;
+		var inputCounter = 0;
 		var suggestionSelectedCounter = 0;
 
 		input1.addEventListener("change", function (event) {
 			changeCounter += 1;
 			inputResult.value = changeCounter;
 		});
 
-		input2.addEventListener("liveChange", function (event) {
-			liveChangeCounter += 1;
-			inputResult.value = liveChangeCounter;
+		input2.addEventListener("input", function (event) {
+			inputCounter += 1;
+			inputResult.value = inputCounter;
 		});
 
 		myInput2.addEventListener("suggestionItemSelect", function (event) {

packages/main/test/sap/ui/webcomponents/main/pages/Select.html

@@ -69,7 +69,7 @@ <h2> Change event counter holder</h2>
 	});
 
 	// Input with Suggestions
-	input.addEventListener("liveChange", function (event) {
+	input.addEventListener("input", function (event) {
 		var value = event.target.value;
 		var suggestionItems = [];
 

packages/main/test/sap/ui/webcomponents/main/pages/kitchen-scripts.js

@@ -155,7 +155,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	var sap_database_entries = [{ key: "Afg", text: "Anna" }, { key: "Arg", text: "Anelia" }, { key: "Alex", text: "Ally" }, { key: "Arm", text: "Boris" }, { key: "Alg", text: "Borg" }, { key: "And", text: "Cindy" }, { key: "Ang", text: "Sara" }, { key: "Ast", text: "Sally" }, { key: "Aus", text: "Daniel" }, { key: "Aze", text: "Don" }, { key: "Aruba", text: "Ema" }, { key: "Antigua", text: "Fred" }, { key: "Bel", text: "John" }, { key: "Bel", text: "Jonathan" }, { key: "Bg", text: "Zack" }, { key: "Bra", text: "Zara" }, { key: "Bra", text: "Wolly"}, { key: "Bra", text: "Will"}, { key: "Bra", text: "Quentin"}];
 	var input = document.getElementById('user');
 
-	input.addEventListener("liveChange", function (event) {
+	input.addEventListener("input", function (event) {
 		var value = event.target.value;
 		var suggestionItems = [];
 

packages/main/test/sap/ui/webcomponents/main/samples/Input.sample.html

@@ -80,7 +80,7 @@ <h3>Input With Suggestions (Note: the usage depends on the framework you are usi
 
 				var oInput = document.getElementById("suggestions-input");
 
-				oInput.addEventListener("liveChange", function(event) {
+				oInput.addEventListener("input", function(event) {
 					var value = event.target.value;
 					var suggestionItems = [];
 
@@ -114,8 +114,8 @@ <h3>Input With Suggestions (Note: the usage depends on the framework you are usi
 	"England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait", "Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal", "Spain", "Sweden", "Sri Lanka", "Senegal", "United Kingdom", "USA" ];
 
 	var oInput = document.getElementById("suggestions-input");
-	// Listen for the liveChange event
-	oInput.addEventListener("liveChange", function() {
+	// Listen for the input event
+	oInput.addEventListener("input", function() {
 		var value = event.target.value;
 		var suggestionItems = Array();
 		// Find the new suggestions
@@ -218,7 +218,7 @@ <h3>Input with Label</h3>
 		searchIcon.addEventListener("press", function(){
 			alert("Look for: " + searchCriteria);
 		});
-		searchInput.addEventListener("liveChange", function(e){
+		searchInput.addEventListener("input", function(e){
 			searchCriteria = e.target.value;
 		});
 		window.prettyPrint();

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

@@ -18,14 +18,14 @@ describe("Input general interaction", () => {
 		assert.strictEqual(inputResult.getProperty("value"), "2", "change is called twice");
 	});
 
-	it("fires liveChange", () => {
+	it("fires input", () => {
 		const input2 = browser.findElementDeep("#input2 >>> input");
 		const inputResult = browser.findElementDeep("#inputResult >>> input");
 
 		input2.click();
 		input2.keys("abc");
 
-		assert.strictEqual(inputResult.getProperty("value"), "3", "liveChange is fired 3 times");
+		assert.strictEqual(inputResult.getProperty("value"), "3", "input is fired 3 times");
 	});
 
 	it("handles suggestions", () => {