Fix list on Firefox browsers

public/javascripts/admin/orders/add.js

@@ -17,7 +17,7 @@ document.getElementById("add-order").addEventListener("click", () => {
     <h2>${locals.order} ${id}</h2>
     <div class="field">
         <label for="sandwich${id}">${locals.sandwich}</label>
-        <input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required>
+        <span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
     </div>
     <div class="field">
         <label for="day${id}">${locals.day}</label>

public/javascripts/index.js

@@ -18,7 +18,7 @@ document.getElementById("add-order").addEventListener("click", () => {
     <h2>${locals.order} ${id}</h2>
     <div class="field">
         <label for="sandwich${id}">${locals.sandwich}</label>
-        <input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required>
+        <span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
     </div>
     <div class="field">
         <label for="day${id}">${locals.day}</label>

public/stylesheets/style.css

@@ -248,6 +248,17 @@ p.before-link a::before {
   width: min-content;
 }
 
+input::-webkit-calendar-picker-indicator {
+  display: none;/* remove default arrow */
+}
+
+.list_arrow:after {
+  content: url(https://i.stack.imgur.com/i9WFO.png);
+  margin-left: -20px;
+  padding: .1em;
+  pointer-events:none;
+}
+
 @media (hover: none) and (pointer: coarse) {
   body {
     font-size: xx-large;

views/admin/orders/add.pug

@@ -6,7 +6,7 @@ block content
         form#order(method="POST")
             div.field
                 label(for="department")=__("department") + ":"
-                input#department(type="list" list="department-list" name="department" autocomplete="off" required)
+                +list("department", "department-list", "department", "", "off", true)
                 datalist#department-list
                     each department in departments
                         option(value=department.name)
@@ -20,13 +20,13 @@ block content
 
             div.field
                 label(for="username")=__("username")
-                input#username(list="usernames" name="username" autocomplete="off")
+                +list("username", "usernames", "username", "", "off")
 
             div#order1.order
                 h2=__("order") + " 1"
                 div.field
                     label(for="sandwich1")=__("sandwich") + ":"
-                    input#sandwich1(type="list" list="sandwich-list" name="sandwiches[1]" autocomplete="off" required)
+                    +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
                 div.field
                     label(for="day1")=__("index.day") + ":"
                     input#day1(type="date" name="dates[1]" required)

views/admin/orders/edit.pug

@@ -7,7 +7,7 @@ block content
             input(type="hidden" name="id" value=order.id)
             div.field
                 label(for="department")=__("department") + ":"
-                input#department(type="list" list="department-list" name="department" autocomplete="off" value=order.Department.name required)
+                +list("department", "department-list", "department", order.Department.name, "off", true)
                 datalist#department-list
                     each department in departments
                         option(value=department.name)
@@ -21,7 +21,7 @@ block content
 
             div.field
                 label(for="username")=__("username")
-                input#username(list="usernames" name="username" value=order.User ? order.User.username : "" autocomplete="off")
+                +list("username", "usernames", "username", order.User ? order.User.username : "", "off")
 
             - i = 0;
             each sandwich in order.Sandwiches
@@ -30,7 +30,7 @@ block content
                     h2=__("order") + " "  + i
                     div.field
                         label(for="sandwich"+i)=__("sandwich") + ":"
-                        input(id="#sandwich"+i type="list" list="sandwich-list" name="sandwiches["+i+"]" autocomplete="off" value=sandwich.name required)
+                        +list("#sandwich"+i, "sandwich-list", "sandwiches["+i+"]", sandwich.name, "off", true)
                     div.field
                         label(for="day"+i)=__("index.day") + ":"
                         input(id="#day"+i type="date" name="dates["+i+"]" value=sandwich.SandwichOrder.date required)

views/admin/users/add.pug

@@ -19,7 +19,7 @@ block content
                 input#lastName(type="text" name="lastName" required)
             div.field
                 label(for="department")=__("department") + ":"
-                input#department(type="list" list="department-list" name="department" required)
+                +list("department", "department-list", "department", "", "off", true)
             div.field
                 label(for="password")=__("password") + ":"
                 input#password(type="password" name="password" required)

views/admin/users/edit.pug

@@ -20,7 +20,7 @@ block content
                 input#lastName(type="text" name="lastName" value=targetUser.lastName required)
             div.field
                 label(for="department")=__("department") + ":"
-                input#department(type="list" list="department-list" name="department" value=targetUser.DepartmentName required)
+                +list("department", "department-list", "department", targetUser.DepartmentName, "off", true)
             div.field
                 label(for="password")=__("password") + ":"
                 input#password(type="password" name="password")

views/index.pug

@@ -7,7 +7,7 @@ block content
     form#order(action="/order" method="POST")
       div.field
         label(for="department")=__("department")+":"
-        input#department(type="list" list="department-list" name="department" value=user ? user.DepartmentName : "" autocomplete="off" required)
+        +list("department", "department-list", "department", user ? user.DepartmentName : "", "off", true)
         datalist#department-list
           each department in departments
             option(value=department.name)
@@ -23,7 +23,7 @@ block content
         h2=__("order")+" 1"
         div.field
           label(for="sandwich1")=__("sandwich")+":"
-          input#sandwich1(type="list" list="sandwich-list" name="sandwiches[1]" autocomplete="off" required)
+          +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
         div.field
           label(for="day1")=__("index.day")+":"
           input#day1(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "" name="dates[1]" required)

views/layout.pug

@@ -76,7 +76,7 @@ html
             input#phoneNumberContact(type="tel" name="phoneNumber")
         div.field
           label(for="subjectContact")="* "+__("layout.subject")
-          input#subjectContact(list="subjectContactList" autocomplete="off" name="subject" required)
+          +list("subjectContact", "subjectContactList", "subject", "", "off", true)
           datalist#subjectContactList
             option(value=__("layout.commandEdit"))
             option(value=__("layout.commandRemove"))

views/mixin.pug

@@ -1,3 +1,7 @@
 mixin submit(value)
     div.recaptcha.recaptcha-cb
         input(type="submit" value!=value)
+
+mixin list(id, list, name, value="", autocomplete="on", required="false")
+    span.list_arrow
+        input(id=id type="list" list=list name=name value=value autocomplete=autocomplete required=required)

views/profile.pug

@@ -19,7 +19,7 @@ block content
                 input#lastName(type="text" name="lastName" value=user.lastName required)
             div.field
                 label(for="department")=__("department")+":"
-                input#department(type="list" list="department-list" name="department" value=user.DepartmentName required)
+                +list("department", "department-list", "department", user.DepartmentName, "off", true)
             div.field
                 label(for="password")=__("password")+":"
                 input#password(type="password" name="password")

views/register.pug

@@ -17,7 +17,7 @@ block content
             input#lastName(type="text" name="lastName" required)
         div.field
             label(for="department")=__("department")+":"
-            input#department(type="list" list="department-list" name="department" required)
+            +list("department", "department-list", "department", "", "off", true)
         div.field
             label(for="password")=__("password")+":"
             input#password(type="password" name="password" required)