From f8e73eccb77550b94c5d9af42b711da1391ae515 Mon Sep 17 00:00:00 2001
From: Bill Keese <bill@dojotoolkit.org>
Date: Thu, 10 Sep 2015 06:54:13 +0900
Subject: [PATCH] Make FormWidget read name/value from embedded <input> on
 creation. Also create embedded <input> (aka this.valueNode) if it does not
 exist.

The widget subclass should add this.valueNode to the DOM if it's not already there.
It shoudn't call appendChild() unnecessarily though as that will break back-button
support on IE.  See deliteful/tests/functional/StarRating-formback.html for test.
Also (if desired) the widget should set display:none on the <input>, either directly
or via a stylesheet.

Currently does not handle some complex cases, such as:

* deliteful/Select should support an embedded <select> rather than <input>
* deliteful/Checkbox and Radiobutton's embedded <input> also has "checked" property;
  should also sync that property.

Fixes #394, refs #423 tangentially, refs ibm-js/deliteful#584 too.
---
 FormWidget.js                         | 22 ++++++++++++++++++++++
 tests/functional/FormValueWidget.html | 14 ++------------
 tests/functional/FormValueWidget.js   |  9 +++++++++
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/FormWidget.js b/FormWidget.js
index ed531ebfb3..d5f142c7e3 100644
--- a/FormWidget.js
+++ b/FormWidget.js
@@ -98,6 +98,28 @@ define([
 		 * @default undefined
 		 */
 
+		_mapAttributes: dcl.superCall(function (sup) {
+			return function () {
+				var input = this.querySelector("input");
+				if (input) {
+					// Get value and name from embedded <input> node.
+					if (input.value) {
+						this.setAttribute("value", input.value);
+					}
+					if (input.name) {
+						this.setAttribute("name", input.name);
+					}
+				} else {
+					// Create this.valueNode as a convenience, but don't add to the DOM because that breaks widgets like
+					// deliteful/Checkbox that unconditionally create their own this.valueNode:
+					// You end up with two embedded <input> nodes.
+					input = this.ownerDocument.createElement("input");
+				}
+				this.valueNode = input;
+				return sup.call(this);
+			};
+		}),
+
 		refreshRendering: function (oldValues) {
 			// Handle disabled and tabIndex, across the tabStops and root node.
 			// No special processing is needed for tabStops other than just to refresh disabled and tabIndex.
diff --git a/tests/functional/FormValueWidget.html b/tests/functional/FormValueWidget.html
index 8e6db6997f..54a6ec9107 100644
--- a/tests/functional/FormValueWidget.html
+++ b/tests/functional/FormValueWidget.html
@@ -42,19 +42,9 @@
 					"<span attach-point=focusNode class='value'>{{this.value}}</span>" +
 					"<span on-click=decrement class='button decrement'>-</span>" +
 					"<span on-click=increment class='button increment'>+</span>" +
-					"<span style='display:none' attach-point=containerNode></span>" +
+					"<span style='display:none' attach-point=containerNode></span>" +	// for this.valueNode <input>
 					"</template>"
 				),
-				postRender: function () {
-					// TODO: move this logic into FormValueWidget itself?
-					this.valueNode = this.containerNode.querySelector("input");
-					if (this.valueNode) {
-						this.value = this.valueNode.value;
-					} else {
-						this.valueNode = this.ownerDocument.createElement("input");
-						this.containerNode.appendChild(this.valueNode);
-					}
-				},
 				decrement: function () {
 					this.value--;
 				},
@@ -72,7 +62,7 @@ <h1>FormValueWidget functional test</h1>
 
 <form id="form1">
 	<span id="spinner1_label">Spinner widget based on FormValueWidget:</span>
-	<my-spinner id="spinner1" aria-labelledby="spinner1_label"><input value="5"></my-spinner>
+	<my-spinner id="spinner1" aria-labelledby="spinner1_label"><input value="5" name="spinner1_name"></my-spinner>
 
 	<br>
 	<input type="reset" id="resetB" name="reset">
diff --git a/tests/functional/FormValueWidget.js b/tests/functional/FormValueWidget.js
index debf61edf4..b8824e56dd 100644
--- a/tests/functional/FormValueWidget.js
+++ b/tests/functional/FormValueWidget.js
@@ -17,6 +17,15 @@ define([
 					intern.config.WAIT_TIMEOUT, intern.config.POLL_INTERVAL));
 		},
 
+		creation: function () {
+			this.timeout = intern.config.TEST_TIMEOUT;
+			return this.remote.execute("return spinner1.value").then(function (value) {
+				assert.equal(value, 5, "original value");	// taken from the embedded <input>
+			}).execute("return spinner1.name").then(function (name) {
+				assert.strictEqual(name, "spinner1_name", "name");
+			});
+		},
+
 		reset: function () {
 			this.timeout = intern.config.TEST_TIMEOUT;
 			var environmentType = this.remote.environmentType;