feat: enable radio button form support (#357)

Author: vladitasev

packages/main/src/CheckBox.js

@@ -186,6 +186,17 @@ class CheckBox extends UI5Element {
 	onBeforeRendering() {
 		this.syncLabel();
 
+		this._enableFormSupport();
+	}
+
+	syncLabel() {
+		this._label = Object.assign({}, this._label);
+		this._label.text = this.text;
+		this._label.wrap = this.wrap;
+		this._label.textDirection = this.textDirection;
+	}
+
+	_enableFormSupport() {
 		if (CheckBox.FormSupport) {
 			CheckBox.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
 				nativeInput.disabled = element.disabled || !element.checked;
@@ -196,13 +207,6 @@ class CheckBox extends UI5Element {
 		}
 	}
 
-	syncLabel() {
-		this._label = Object.assign({}, this._label);
-		this._label.text = this.text;
-		this._label.wrap = this.wrap;
-		this._label.textDirection = this.textDirection;
-	}
-
 	onclick() {
 		this.toggle();
 	}

packages/main/src/InputElementsFormSupport.js

@@ -2,6 +2,7 @@ import Input from "./Input.js";
 import TextArea from "./TextArea.js";
 import DatePicker from "./DatePicker.js";
 import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
 
 import FormSupport from "./util/FormSupport.js";
@@ -10,6 +11,7 @@ Input.FormSupport = FormSupport;
 TextArea.FormSupport = FormSupport;
 DatePicker.FormSupport = FormSupport;
 CheckBox.FormSupport = FormSupport;
+RadioButton.FormSupport = FormSupport;
 Button.FormSupport = FormSupport;
 
 export default {};

packages/main/src/RadioButton.js

@@ -102,6 +102,13 @@ const metadata = {
 		 * <br/><b>Note:</b>
 		 * Only one radio button can be selected per group.
 		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, 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-radiobutton</code> so that it can be submitted as
+		 * part of an HTML form.
+		 *
 		 * @type {string}
 		 * @public
 		 */
@@ -110,6 +117,22 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the form value of the <code>ui5-radiobutton</code>.
+		 * When a form with a radio button group is submitted, the group's value
+		 * will be the value of the currently selected radio button.
+		 *
+		 * <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		value: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_label: {
 			type: Object,
 		},
@@ -170,6 +193,8 @@ class RadioButton extends UI5Element {
 	onBeforeRendering() {
 		this.syncLabel();
 		this.syncGroup();
+
+		this._enableFormSupport();
 	}
 
 	syncLabel() {
@@ -198,6 +223,17 @@ class RadioButton extends UI5Element {
 		this._name = this.name;
 	}
 
+	_enableFormSupport() {
+		if (RadioButton.FormSupport) {
+			RadioButton.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+				nativeInput.disabled = element.disabled || !element.selected;
+				nativeInput.value = element.selected ? element.value : "";
+			});
+		} else if (this.value) {
+			console.warn(`In order for the "value" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+		}
+	}
+
 	onclick() {
 		return this.toggle();
 	}

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

@@ -25,6 +25,10 @@
     <ui5-checkbox name="cb" checked></ui5-checkbox>
     <ui5-checkbox name="cb_disabled" disabled checked></ui5-checkbox>
 
+    <ui5-radiobutton name="radio" text="A" value="a"></ui5-radiobutton>
+    <ui5-radiobutton name="radio" text="B" value="b" selected></ui5-radiobutton>
+    <ui5-radiobutton name="radio" text="C" value="c"></ui5-radiobutton>
+
     <ui5-button id="b1">Does not submit forms</ui5-button>
 
     <ui5-button id="b2" submits>Submits forms</ui5-button>

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

@@ -72,6 +72,24 @@ <h3> Input type 'URL'</h3>
     <br>
     <ui5-checkbox name="cb"></ui5-checkbox>
 
+    <br><br>
+
+    <ui5-radiobutton name="radio1" text="A" value="a" selected></ui5-radiobutton>
+    <ui5-radiobutton name="radio1" text="B" value="b"></ui5-radiobutton>
+    <ui5-radiobutton name="radio1" text="C" value="c"></ui5-radiobutton>
+
+    <br><br>
+
+    <ui5-radiobutton name="radio2" text="D" value="d" selected></ui5-radiobutton>
+    <ui5-radiobutton name="radio2" text="E" value="e"></ui5-radiobutton>
+    <ui5-radiobutton name="radio2" text="F" value="f"></ui5-radiobutton>
+
+    <br><br>
+
+    <input type="radio" name="radio_native" value="o1">Option 1<br>
+    <input type="radio" name="radio_native" value="o2" selected>Option 2<br>
+    <input type="radio" name="radio_native" value="o3">Option 3
+
     <br>
     <ui5-button>Does not submit forms</ui5-button>
 

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

@@ -21,7 +21,7 @@ describe("Form support", () => {
 		submitButton.click();
 
 		const formWasSubmitted = browser.execute(() => {
-			const expectedFormData = "FormSupport.html?input=ok&ta=ok&dp=Apr+10%2C+2019&cb=on";
+			const expectedFormData = "FormSupport.html?input=ok&ta=ok&dp=Apr+10%2C+2019&cb=on&radio=b";
 			return location.href.endsWith(expectedFormData);
 		});
 		assert.ok(formWasSubmitted, "For was submitted and URL changed");