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>
(cherry picked from commit 9e6949849d7a34d17a7e43c79038f26a9b98d879)

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index fcfc5069426685da91362906040a31533765f8e7..47501bd477505204e5de1f49de7351126ce4a7e4 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -1801,7 +1801,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
                        }));
                });
 
@@ -1840,7 +1840,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;
                        });
 
@@ -1851,7 +1851,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));
 
@@ -1926,7 +1926,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 cf8c03d22cacdc27aa583b345e975464765d1421..6f4b89905ba69c4f5876340ff863eee7bc4516e3 100644 (file)
--- 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 3a108020b6062907cbcaddc2f10ae21ef80e5bde..16d8af3d0f4a32dba1480afa8bdadab919870c4e 100644 (file)
--- 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 a97e9ef6d0ba2cad82a00ff8afb938bcacd7706e..55a7e3168742da205a21ba43158204fb6fda018a 100644 (file)
--- 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 ba6ebb843456f5e40dffad2139f806cca09feb8f..d3efcc062f12e92f8b05b0570f12f90a920c0381 100644 (file)
--- 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:%>