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>

5 files changed, 18 insertions, 18 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);
 		}
diff --git a/modules/luci-base/luasrc/view/cbi/dropdown.htm b/modules/luci-base/luasrc/view/cbi/dropdown.htm
index cf8c03d22..6f4b89905 100644
--- a/modules/luci-base/luasrc/view/cbi/dropdown.htm
+++ b/modules/luci-base/luasrc/view/cbi/dropdown.htm
@@ -30,7 +30,7 @@
 			<li<%=
 				attr("data-index", i) ..
 				attr("data-depends", self:deplist2json(section, self.deplist[i])) ..
-				attr("value", key) ..
+				attr("data-value", key) ..
 				ifattr(selected[key], "selected", "selected")
 			%>>
 				<%=pcdata(self.vallist[i])%>
diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index c5addc0dd..7ecec10a8 100644
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
@@ -30,7 +30,7 @@
 	ifattr(self.rmempty or self.optional, "optional", "optional")
 %>>
 	<script type="item-template"><!--
-		<li value="{{value}}">
+		<li data-value="{{value}}">
 			<span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
 				<strong>{{value}}:</strong><em>(<%:create%>)</em>
 			</span>
@@ -38,7 +38,7 @@
 	--></script>
 	<ul>
 		<% if self.allowlocal then %>
-		<li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+		<li data-value=""<%=ifattr(checked[""], "selected", "selected")%>>
 			<span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 				<strong><%:Device%></strong>
 				<% if self.allowany and self.allowlocal then -%>
@@ -48,14 +48,14 @@
 			</span>
 		</li>
 		<% elseif self.widget ~= "checkbox" and (self.rmempty or self.optional) then %>
-		<li value=""<%=ifattr(checked[""], "selected", "selected")%>>
+		<li data-value=""<%=ifattr(checked[""], "selected", "selected")%>>
 			<span class="zonebadge">
 				<em><%:unspecified%></em>
 			</span>
 		</li>
 		<% end %>
 		<% if self.allowany then %>
-		<li value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
+		<li data-value="*"<%=ifattr(checked["*"], "selected", "selected")%>>
 			<span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 				<strong><%:Any zone%></strong>
 				<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
@@ -67,7 +67,7 @@
 				if zone:name() ~= self.exclude then
 					selected = selected or (value == zone:name())
 		%>
-		<li<%=attr("value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
+		<li<%=attr("data-value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>>
 			<span style="background-color:<%=zone:get_color()%>" class="zonebadge">
 				<strong><%=zone:name()%>:</strong>
 				<%-
@@ -94,7 +94,7 @@
 		<% end end %>
 
 		<% if self.widget ~= "checkbox" and not self.nocreate then %>
-		<li value="-">
+		<li data-value="-">
 			<span class="zonebadge">
 				<em><%:create%>:</em>
 				<input type="password" style="display:none" />
diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
index a97e9ef6d..55a7e3168 100644
--- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
@@ -47,7 +47,7 @@
 	ifattr(self.widget == "checkbox", "optional", "optional")
 %>>
 	<script type="item-template"><!--
-		<li value="{{value}}">
+		<li data-value="{{value}}">
 			<img title="<%:Custom Interface%>: &quot;{{value}}&quot;" src="<%=resource%>/icons/ethernet_disabled.png" />
 			<span class="hide-open">{{value}}</span>
 			<span class="hide-close"><%:Custom Interface%>: "{{value}}"</span>
@@ -61,7 +61,7 @@
 			   iface:name() ~= self.exclude
 			then %>
 		<li<%=
-			attr("value", iface:name()) ..
+			attr("data-value", iface:name()) ..
 			ifattr(checked[iface:name()], "selected", "selected")
 		%>>
 			<img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
@@ -78,7 +78,7 @@
 		</li>
 		<% end end %>
 		<% if not self.nocreate then %>
-		<li value="">
+		<li data-value="">
 			<img title="<%:Custom Interface%>" src="<%=resource%>/icons/ethernet_disabled.png" />
 			<span><%:Custom Interface%>:</span>
 			<input type="password" style="display:none" />
diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
index ba6ebb843..d3efcc062 100644
--- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
@@ -26,7 +26,7 @@
 	ifattr(self.widget == "checkbox", "optional", "optional")
 %>>
 	<script type="item-template"><!--
-		<li value="{{value}}">
+		<li data-value="{{value}}">
 			<span class="ifacebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)">
 				{{value}}: <em>(<%:create%>)</em>
 			</span>
@@ -34,7 +34,7 @@
 	--></script>
 	<ul>
 		<% if self.widget ~= "checkbox" then %>
-		<li value=""<%= ifattr(not value, "selected", "selected") %>>
+		<li data-value=""<%= ifattr(not value, "selected", "selected") %>>
 			<em><%:unspecified%></em>
 		</li>
 		<% end %>
@@ -44,7 +44,7 @@
 			      (net:name() ~= self.exclude) and
 			      (not self.novirtual or not net:is_virtual())
 			   then %>
-		<li<%= attr("value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>>
+		<li<%= attr("data-value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>>
 			<span class="ifacebadge"><%=net:name()%>:
 				<%
 					local empty = true
@@ -63,7 +63,7 @@
 		<% end end %>
 
 		<% if not self.nocreate then %>
-		<li value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>>
+		<li data-value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>>
 			<em>
 				<%- if self.widget == "checkbox" then -%>
 					<%:create:%>