luci-base: fix cbi dropdown quirks with MS Edge

On MS Edge, the behaviour of "value" attributes on "li" elements is
unreliable, so use the "data-" prefix to circumvent the problem.

Ref: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/19320991/
Fixes: #2224
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 4 insertions, 4 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 70255c0b5..f4bf0f40f 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -1774,7 +1774,7 @@ CBIDropdown = {
 			div.appendChild(E('input', {
 				type: 'hidden',
 				name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''),
-				value: s.hasAttribute('value') ? s.getAttribute('value') : s.innerText
+				value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText
 			}));
 		});
 
@@ -1813,7 +1813,7 @@ CBIDropdown = {
 			var new_item = null;
 
 			ul.childNodes.forEach(function(li) {
-				if (li.getAttribute && li.getAttribute('value') === item)
+				if (li.getAttribute && li.getAttribute('data-value') === item)
 					new_item = li;
 			});
 
@@ -1824,7 +1824,7 @@ CBIDropdown = {
 				if (tpl)
 					markup = (tpl.textContent || tpl.innerHTML || tpl.firstChild.data).replace(/^<!--|-->$/, '').trim();
 				else
-					markup = '<li value="{{value}}">{{value}}</li>';
+					markup = '<li data-value="{{value}}">{{value}}</li>';
 
 				new_item = E(markup.replace(/{{value}}/g, item));
 
@@ -1899,7 +1899,7 @@ function cbi_dropdown_init(sb) {
 
 		ndisplay--;
 
-		if (this.optional && !ul.querySelector('li[value=""]')) {
+		if (this.optional && !ul.querySelector('li[data-value=""]')) {
 			var placeholder = E('li', { placeholder: '' }, this.placeholder);
 			ul.firstChild ? ul.insertBefore(placeholder, ul.firstChild) : ul.appendChild(placeholder);
 		}