feat(ui5-input): introduce maxlength property (#976)

SAP · Nov 26, 2019 · c149f5f · c149f5f
1 parent e53a76d
commit c149f5f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -13,6 +13,7 @@
 			?required="{{required}}"
 			.value="{{value}}"
 			placeholder="{{placeholder}}"
+			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"
 			aria-owns="{{accInfo.input.ariaOwns}}"
 			aria-invalid="{{accInfo.input.ariaInvalid}}"

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -9,6 +9,7 @@ import {
 	isSpace,
 	isEnter,
 } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 // import Icon from "./Icon.js";
 import InputType from "./types/InputType.js";
@@ -210,6 +211,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Sets the maximum number of characters available in the input field.
+		 *
+		 * @type {Integer}
+		 * @since 1.0.0-rc.5
+		 * @public
+		 */
+		maxlength: {
+			type: Integer,
+		},
+
 		/**
 		 * @private
 		 */

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -77,7 +77,7 @@ <h3> Input type 'Email'</h3>
 	<ui5-input id="myInput4" style="width:100%" type="Email" name="my-input-email"></ui5-input>
 
 	<h3> Input type 'Tel'</h3>
-	<ui5-input id="myInput5" style="width:100%" type="Tel"  name="my-input-tel"></ui5-input>
+	<ui5-input id="myInput5" maxlength="10" style="width:100%" type="Tel"  name="my-input-tel"></ui5-input>
 
 	<h3> Input type 'URL'</h3>
 	<ui5-input id="myInput6" style="width:100%" type="URL"></ui5-input>

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -129,4 +129,19 @@ describe("Input general interaction", () => {
 		assert.strictEqual(innerInput.getValue(), "", "Inner's property value should be empty");
 	});
 	*/
+
+	it("Input's maxlength property is set correctly", () => {
+		const input5 = $("#myInput5");
+		const inputShadowRef = $("#myInput5").shadow$("input");
+
+		inputShadowRef.click();
+
+		for (let i = 0; i <15 ; i++) {
+			inputShadowRef.keys("c");
+		}
+
+		assert.strictEqual(inputShadowRef.getProperty("value").length, 10, "Input's value should not exceed 10 characters.");
+		assert.ok(input5.getProperty("maxlength"), "Input's maxlength property should be applied.");
+		assert.strictEqual(inputShadowRef.getAttribute("maxlength"), "10", "Input's maxlength attribute should be applied.");
+	});
 });