luci-base: ui.js: properly handle rich choices in Dropdowns, DynLists

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 26 insertions, 6 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 774d4a665..75563c11c 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -442,11 +442,17 @@ var UIDropdown = UIElement.extend({
 				if (!this.choices.hasOwnProperty(this.values[i]))
 					keys.push(this.values[i]);
 
-		for (var i = 0; i < keys.length; i++)
+		for (var i = 0; i < keys.length; i++) {
+			var label = this.choices[keys[i]];
+
+			if (L.dom.elem(label))
+				label = label.cloneNode(true);
+
 			sb.lastElementChild.appendChild(E('li', {
 				'data-value': keys[i],
 				'selected': (this.values.indexOf(keys[i]) > -1) ? '' : null
-			}, this.choices[keys[i]] || keys[i]));
+			}, [ label || keys[i] ]));
+		}
 
 		if (this.options.create) {
 			var createEl = E('input', {
@@ -1339,9 +1345,14 @@ var UIDynamicList = UIElement.extend({
 				                  true, this.options.validate, 'blur', 'keyup');
 		}
 
-		for (var i = 0; i < this.values.length; i++)
-			this.addItem(dl, this.values[i],
-				this.choices ? this.choices[this.values[i]] : null);
+		for (var i = 0; i < this.values.length; i++) {
+			var label = this.choices ? this.choices[this.values[i]] : null;
+
+			if (L.dom.elem(label))
+				label = label.cloneNode(true);
+
+			this.addItem(dl, this.values[i], label);
+		}
 
 		return this.bind(dl);
 	},
@@ -1458,7 +1469,16 @@ var UIDynamicList = UIElement.extend({
 			sbVal.element.setAttribute('dynlistcustom', '');
 		}
 
-		this.addItem(dl, sbVal.value, sbVal.text, true);
+		var label = sbVal.text;
+
+		if (sbVal.element) {
+			label = E([]);
+
+			for (var i = 0; i < sbVal.element.childNodes.length; i++)
+				label.appendChild(sbVal.element.childNodes[i].cloneNode(true));
+		}
+
+		this.addItem(dl, sbVal.value, label, true);
 	},
 
 	handleKeydown: function(ev) {