From 9fff63083a5b21297bcc76f6d3e50c5d66c8651a Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Tue, 23 Apr 2019 15:30:28 +0300 Subject: [PATCH 1/2] feat: enable radio button form support --- packages/main/src/InputElementsFormSupport.js | 2 ++ packages/main/src/RadioButton.js | 32 +++++++++++++++++++ .../webcomponents/main/pages/FormSupport.html | 4 +++ .../sap/ui/webcomponents/main/pages/form.html | 18 +++++++++++ packages/main/test/specs/FormSupport.spec.js | 2 +- 5 files changed, 57 insertions(+), 1 deletion(-) diff --git a/packages/main/src/InputElementsFormSupport.js b/packages/main/src/InputElementsFormSupport.js index 8ed9c7bd40bb..ee6e735f4b74 100644 --- a/packages/main/src/InputElementsFormSupport.js +++ b/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 {}; diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index baff873cd55a..5e38a390beeb 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -99,6 +99,13 @@ const metadata = { *
Note: * Only one radio button can be selected per group. * + * Important: For the name property to have effect when submitting forms, you must add the following import to your project: + * import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport"; + * + * Note: When set, a native input HTML element + * will be created inside the ui5-radiobutton so that it can be submitted as + * part of an HTML form. + * * @type {string} * @public */ @@ -107,6 +114,22 @@ const metadata = { type: String, }, + /** + * Defines the form value of the ui5-radiobutton. + * When a form with a radio button group is submitted, the group's value + * will be the value of the currently selected radio button. + * + * Important: For the value property to have effect, you must add the following import to your project: + * import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport"; + * + * @type {string} + * @public + */ + value: { + type: String, + defaultValue: "", + }, + _label: { type: Object, }, @@ -167,6 +190,15 @@ class RadioButton extends UI5Element { onBeforeRendering() { this.syncLabel(); this.syncGroup(); + + 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 + } } syncLabel() { diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html b/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html index 5d77f948408e..316e8e097d91 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html @@ -25,6 +25,10 @@ + + + + Does not submit forms Submits forms diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/form.html b/packages/main/test/sap/ui/webcomponents/main/pages/form.html index 41f2917155b2..76903fe33685 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/form.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/form.html @@ -72,6 +72,24 @@

Input type 'URL'


+

+ + + + + +

+ + + + + +

+ + Option 1
+ Option 2
+ Option 3 +
Does not submit forms diff --git a/packages/main/test/specs/FormSupport.spec.js b/packages/main/test/specs/FormSupport.spec.js index 28466d18c0ab..188511ec2475 100644 --- a/packages/main/test/specs/FormSupport.spec.js +++ b/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"); From 86598b9831f25d1ec0668f89800c704218d6f064 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Tue, 23 Apr 2019 16:04:38 +0300 Subject: [PATCH 2/2] minor refactoring --- packages/main/src/CheckBox.js | 18 +++++++++++------- packages/main/src/RadioButton.js | 20 ++++++++++++-------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js index ddd970e56b67..7fb8cee4a927 100644 --- a/packages/main/src/CheckBox.js +++ b/packages/main/src/CheckBox.js @@ -183,6 +183,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; @@ -193,13 +204,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(); } diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index 5e38a390beeb..1e484537f83b 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -191,14 +191,7 @@ class RadioButton extends UI5Element { this.syncLabel(); this.syncGroup(); - 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 - } + this._enableFormSupport(); } syncLabel() { @@ -227,6 +220,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(); }