fix(ui5-input): number input doesn't lose value (#2130)

SAP · Sep 2, 2020 · 2c6139d · 2c6139d
1 parent 306572f
commit 2c6139d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -10,6 +10,7 @@ import {
 	isDown,
 	isSpace,
 	isEnter,
+	isBackSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -676,6 +677,11 @@ class Input extends UI5Element {
 	async _handleInput(event) {
 		const inputDomRef = await this.getInputDOMRef();
 
+		if (this.value && this.type === InputType.Number && !isBackSpace(event) && !inputDomRef.value) {
+			// For input with type="Number", if the delimiter is entered second time, the inner input is firing event with empty value
+			return;
+		}
+
 		if (event.target === inputDomRef) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -144,6 +144,8 @@ <h3> Input required</h3>
 	<h3> Input type 'Number'</h3>
 	<ui5-input id="input-number" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>
 
+	<ui5-input id="input-number2" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>
+
 	<h3> Input type 'Password'</h3>
 	<ui5-input id="input-password" type="Password" placeholder="Typing in private ..."></ui5-input>
 

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -154,7 +154,7 @@ describe("Input general interaction", () => {
 		assert.equal(suggestionsScrollable, true, "The suggestions popup is scrolalble");
 
 		// close suggestions
-		input.keys("Enter"); 
+		input.keys("Enter");
 	});
 
 	it("handles suggestions", () => {
@@ -293,7 +293,19 @@ describe("Input general interaction", () => {
 		const firstListItem = respPopover.$("ui5-list").$("ui5-li-suggestion-item");
 
 		assert.ok(respPopover.isDisplayedInViewport(), "The popover is visible");
-		assert.ok(firstListItem.getHTML().indexOf(EXPTECTED_TEXT) !== -1, "The suggestions is highlighted.")
+		assert.ok(firstListItem.getHTML().indexOf(EXPTECTED_TEXT) !== -1, "The suggestions is highlighted.");
+	});
+
+	it("Doesn't remove value on number type input even if locale specific delimiter/multiple delimiters", () => {
+		const input = browser.$("#input-number2");
+
+		input.click();
+		input.keys("1.22.33");
+		input.keys("Tab");
+
+		browser.pause(500);
+
+		assert.strictEqual(parseFloat(input.getProperty("value")), 1.22, "Value is not lost");
 	});
 
 	it("fires suggestion-item-preview", () => {
@@ -308,7 +320,7 @@ describe("Input general interaction", () => {
 		inputItemPreview.keys("c");
 
 		inputItemPreview.keys("ArrowDown");
-		
+
 		// assert
 		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputPreview2");
 		const inputPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
@@ -326,4 +338,4 @@ describe("Input general interaction", () => {
 		assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
 		assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
 	});
-});
+});