feat: enable form support and name attribute for inputs (#337)

vladitasev · web-flow · commit 188d2314d041 · 2019-04-22T09:27:45.000+03:00
diff --git a/packages/main/.eslintrc.js b/packages/main/.eslintrc.js
@@ -46,7 +46,7 @@ module.exports = {
 		// "consistent-return": 1, // removed for UI5 WebComponents
 		"curly": [2, "all"],
 		// "default-case": 1, // removed for UI5 WebComponents
-		"import/extensions": ["error", "ignorePackages"], // override for UI5 WebComponents
+		"import/extensions": ["error", "always"], // override for UI5 WebComponents
 		"no-alert": 2,
 		"no-caller": 2,
 		"no-div-regex": 2,
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -49,6 +49,9 @@ import StandardListItem from "./dist/StandardListItem.js";
 import CustomListItem from "./dist/CustomListItem.js";
 import GroupHeaderListItem from "./dist/GroupHeaderListItem.js";
 
+// used for forms
+import InputElementsFormSupport from "./dist/InputElementsFormSupport.js";
+
 // used in test pages
 import RenderScheduler from "@ui5/webcomponents-base/src/RenderScheduler.js";
 window.RenderScheduler = RenderScheduler;
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -75,7 +75,7 @@
     "test:jest": "jest",
     "test": "npm-run-all --sequential test:jest test:wdio",
     "watch:src": "copy-and-watch --watch \"src/**/*.js\" \"src/**/i18n/*.json\" dist/",
-    "watch:bundle": "rollup -c -w --environment ES5_BUILD,DEV",
+    "watch:bundle": "wait-on dist/i18n/messagebundle.json && rollup -c -w --environment ES5_BUILD,DEV",
     "watch:templates": "npm-watch build:templates",
     "watch:samples": "npm-watch build:samples",
     "watch:pages": "npm-watch build:pages",
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -81,6 +81,20 @@ const metadata = {
 		 */
 		activeIcon: { type: URI, defaultValue: null },
 
+		/**
+		 * When set to <code>true</code>, the <code>ui5-button</code> will
+		 * automatically submit the nearest form element upon <code>press</code>.
+		 *
+		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * @type {boolean}
+		 * @public
+		 */
+		submits: {
+			type: Boolean,
+		},
+
 		/**
 		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
 		 */
@@ -174,6 +188,10 @@ class Button extends UI5Element {
 		} else {
 			this._iconSettings = null;
 		}
+
+		if (this.submits && !Button.FormSupport) {
+			console.warn(`In order for the "submits" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
 	}
 
 	onEnterDOM() {
@@ -188,6 +206,9 @@ class Button extends UI5Element {
 		event.isMarked = "button";
 		if (!this.disabled) {
 			this.fireEvent("press", {});
+			if (Button.FormSupport) {
+				Button.FormSupport.triggerFormSubmit(this);
+			}
 		}
 	}
 
diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs
@@ -15,4 +15,6 @@
 				?wrap="{{ctr._label.wrap}}"
 		>{{ctr._label.text}}</ui5-label>
 		{{/if}}
-</div>
+
+	<slot name="formSupport"></slot>
+</div>
diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
@@ -92,6 +92,23 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Determines the name with which the <code>ui5-checkbox</code> will be submitted in an HTML form.
+		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * <b>Note:</b> When set, a native <code>input</code> HTML element
+		 * will be created inside the <code>ui5-checkbox</code> so that it can be submitted as
+		 * part of an HTML form. Do not use this property unless you need to submit a form.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		name: {
+			type: String,
+		},
+
 		_label: {
 			type: Object,
 		},
@@ -165,6 +182,15 @@ class CheckBox extends UI5Element {
 
 	onBeforeRendering() {
 		this.syncLabel();
+
+		if (CheckBox.FormSupport) {
+			CheckBox.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+				nativeInput.disabled = element.disabled || !element.checked;
+				nativeInput.value = element.checked ? "on" : "";
+			});
+		} else if (this.name) {
+			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
 	}
 
 	syncLabel() {
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
@@ -48,4 +48,6 @@
 				@selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
 		></ui5-calendar>
 	</ui5-popover>
-</div>
+
+	<slot name="formSupport"></slot>
+</div>
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -113,6 +113,23 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Determines the name with which the <code>ui5-datepicker</code> will be submitted in an HTML form.
+		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * <b>Note:</b> When set, a native <code>input</code> HTML element
+		 * will be created inside the <code>ui5-datepicker</code> so that it can be submitted as
+		 * part of an HTML form. Do not use this property unless you need to submit a form.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		name: {
+			type: String,
+		},
+
 		_isPickerOpen: {
 			defaultValue: false,
 			type: Boolean,
@@ -283,6 +300,12 @@ class DatePicker extends UI5Element {
 		} else {
 			this._calendar.selectedDates = [];
 		}
+
+		if (DatePicker.FormSupport) {
+			DatePicker.FormSupport.syncNativeHiddenInput(this);
+		} else if (this.name) {
+			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
 	}
 
 	onclick(event) {
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -38,4 +38,6 @@
 					</ui5-list>
 			</ui5-popover>
 	{{/if}}
-</div>
+
+	<slot name="formSupport"></slot>
+</div>
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -145,6 +145,23 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 
+		/**
+		 * Determines the name with which the <code>ui5-input</code> will be submitted in an HTML form.
+		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * <b>Note:</b> When set, a native <code>input</code> HTML element
+		 * will be created inside the <code>ui5-input</code> so that it can be submitted as
+		 * part of an HTML form. Do not use this property unless you need to submit a form.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		name: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the <code>ui5-input</code> should show suggestions, if such are present.
 		 *
@@ -302,6 +319,12 @@ class Input extends UI5Element {
 		if (this.showSuggestions) {
 			this.enableSuggestions();
 		}
+
+		if (Input.FormSupport) {
+			Input.FormSupport.syncNativeHiddenInput(this);
+		} else if (this.name) {
+			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
 	}
 
 	onAfterRendering() {
diff --git a/packages/main/src/InputElementsFormSupport.js b/packages/main/src/InputElementsFormSupport.js
@@ -0,0 +1,15 @@
+import Input from "./Input.js";
+import TextArea from "./TextArea.js";
+import DatePicker from "./DatePicker.js";
+import CheckBox from "./CheckBox.js";
+import Button from "./Button.js";
+
+import FormSupport from "./util/FormSupport.js";
+
+Input.FormSupport = FormSupport;
+TextArea.FormSupport = FormSupport;
+DatePicker.FormSupport = FormSupport;
+CheckBox.FormSupport = FormSupport;
+Button.FormSupport = FormSupport;
+
+export default {};
diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
@@ -1,4 +1,4 @@
-import UI5Element from "@ui5/webcomponents-base/src/UI5Element";
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
 import slideDown from "@ui5/webcomponents-base/src/animations/slideDown.js";
diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
@@ -34,4 +34,6 @@
 	{{#if ctr.showExceededText}}
 		<span class="{{classes.exceededText}}">{{exceededText}}</span>
 	{{/if}}
-</div>
+
+	<slot name="formSupport"></slot>
+</div>
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -139,6 +139,23 @@ const metadata = {
 			defaultValue: 0,
 		},
 
+		/**
+		 * Determines the name with which the <code>ui5-textarea</code> will be submitted in an HTML form.
+		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * <b>Note:</b> When set, a native <code>input</code> HTML element
+		 * will be created inside the <code>ui5-textarea</code> so that it can be submitted as
+		 * part of an HTML form. Do not use this property unless you need to submit a form.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		name: {
+			type: String,
+		},
+
 		_height: {
 			type: CSSSize,
 			defaultValue: null,
@@ -236,6 +253,12 @@ class TextArea extends UI5Element {
 			// this should be complex calc between line height and paddings - TODO: make it stable
 			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
 		}
+
+		if (TextArea.FormSupport) {
+			TextArea.FormSupport.syncNativeHiddenInput(this);
+		} else if (this.name) {
+			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
 	}
 
 	getInputDomRef() {
diff --git a/packages/main/src/util/FormSupport.js b/packages/main/src/util/FormSupport.js
@@ -0,0 +1,47 @@
+class FormSupport {
+	/**
+	 *
+	 * @param element - the WebComponent that needs form support
+	 * @param nativeInputUpdateCallback - determines how the native input's disabled and value properties are calculated
+	 */
+	static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
+		const needsNativeInput = !!element.name;
+		let nativeInput = element.querySelector("input[type=hidden][data-ui5-webcomponents-form-support]");
+		if (needsNativeInput && !nativeInput) {
+			nativeInput = document.createElement("input");
+			nativeInput.type = "hidden";
+			nativeInput.setAttribute("data-ui5-webcomponents-form-support", "");
+			nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
+			element.appendChild(nativeInput);
+		}
+		if (!needsNativeInput && nativeInput) {
+			element.removeChild(nativeInput);
+		}
+
+		if (needsNativeInput) {
+			nativeInput.name = element.name;
+			(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
+		}
+	}
+
+	static triggerFormSubmit(element) {
+		if (!element.submits) {
+			return;
+		}
+		let parentElement;
+		do {
+			parentElement = element.parentElement;
+		} while (parentElement && parentElement.tagName.toLowerCase() !== "form");
+		if (parentElement) {
+			parentElement.submit();
+		}
+	}
+}
+
+
+const copyDefaultProperties = (element, nativeInput) => {
+	nativeInput.disabled = element.disabled;
+	nativeInput.value = element.value;
+};
+
+export default FormSupport;
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html b/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <title>Form support</title>
+    <script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
+    <script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js"></script>
+</head>
+
+<body>
+
+<form method="get">
+
+    <ui5-input name="input" value="ok"></ui5-input>
+    <ui5-input name="input_disabled" disabled value="ok"></ui5-input>
+
+    <ui5-textarea name="ta" value="ok"></ui5-textarea>
+    <ui5-textarea name="ta_disabled" disabled value="ok"></ui5-textarea>
+
+    <ui5-datepicker name="dp" value="Apr 10, 2019"></ui5-datepicker>
+    <ui5-datepicker name="dp_disabled" disabled value="Apr 10, 2019"></ui5-datepicker>
+
+    <ui5-checkbox name="cb" checked></ui5-checkbox>
+    <ui5-checkbox name="cb_disabled" disabled checked></ui5-checkbox>
+
+    <ui5-button id="b1">Does not submit forms</ui5-button>
+
+    <ui5-button id="b2" submits>Submits forms</ui5-button>
+
+</form>
+
+
+</body>
+</html>
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/form.html b/packages/main/test/sap/ui/webcomponents/main/pages/form.html
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/TextArea.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/TextArea.qunit.js
diff --git a/packages/main/test/specs/FormSupport.spec.js b/packages/main/test/specs/FormSupport.spec.js
