Custom data-option-list since native data-list is bad UX

public/css/style.css

@@ -1075,3 +1075,27 @@ table.table-edit-sheet .ql-container {
 .note-section .hide-if-note {
     display: none;
 }
+.data-option-list {
+    position: absolute;
+    background: #fff;
+    border: 1px solid #ddd;
+    margin-top: -1px;
+    width: 100%;
+    z-index: 1;
+    display: none;
+}
+input[data-option-list]:focus+.data-option-list {
+    display: block;
+}
+.data-option-list>div {
+    cursor: pointer;
+    padding: 0.3rem 0.5rem;
+    border-bottom: 1px solid #ddd;
+    color: #666;
+}
+.data-option-list>div:last-child {
+    border-bottom: 0;
+}
+.data-option-list>div:hover {
+    background: aliceblue;
+}

resources/views/app/patient/canvas-sections/rx/form.blade.php

@@ -43,14 +43,18 @@ $formID = rand(0, 100000);
                        class="form-control form-control-sm canvas-rx-title"
                        data-field="title" v-model="item.title" autofocus required>
             </td>
-            <td>
+            <td class="position-relative">
                 <input type="text" :data-index="index"
                        class="form-control form-control-sm"
                        data-field="strength" v-model="item.strength">
                 <input type="text" :data-index="index"
                        class="form-control form-control-sm"
-                       list="frequency-options"
+                       data-option-list="frequency-options"
                        data-field="frequency" v-model="item.frequency">
+                <div id="frequency-options" class="data-option-list">
+                    <div>Once a day</div>
+                    <div>Twice a day</div>
+                </div>
             </td>
             <td><textarea type="text" class="form-control form-control-sm"
                           rx-rte :data-index="index" data-field="detail"
@@ -72,11 +76,6 @@ $formID = rand(0, 100000);
     >+ New Entry</button>
     </div>
 
-    <datalist id="frequency-options">
-        <option value="Once a day">
-        <option value="Twice a day">
-    </datalist>
-
 </div>
 <script>
     (function() {

resources/views/app/patient/canvas-sections/vitals/form.blade.php

@@ -82,12 +82,17 @@ $formID = rand(0, 100000);
                        class="form-control form-control-sm events-none"
                        data-field="title" v-model="item.label" readonly>
             </td>
-            <td>
+            <td class="position-relative">
                 <input type="text" :data-index="index" v-if="index !== 'bmi'"
                        class="form-control form-control-sm"
                        data-field="value" v-model="item.value"
-                       :list="index === 'smokingStatus' ? 'smoking-status-options' : ''"
+                       :data-option-list="index === 'smokingStatus'"
                        v-on:change="autoDate(item, index)" v-on:keyup="autoDate(item, index)">
+                <div id="smoking-status-options" class="data-option-list">
+                    <div>Current</div>
+                    <div>Former</div>
+                    <div>Never</div>
+                </div>
                 <input type="text" :data-index="index" v-if="index === 'bmi'" readonly
                        class="form-control form-control-sm vitals-title"
                        data-field="value" v-model="bmi">
@@ -106,11 +111,6 @@ $formID = rand(0, 100000);
         </tr>
         </tbody>
     </table>
-    <datalist id="smoking-status-options">
-        <option value="Current">
-        <option value="Former">
-        <option value="Never">
-    </datalist>
 </div>
 <script>
     (function() {

resources/views/layouts/template.blade.php

@@ -327,6 +327,20 @@
             addMCInitializer('stag-popups', window.initStagPopupEvents);
         })();
     </script>
+    <script>
+        (function() {
+            function init() {
+                $(document)
+                    .off('mousedown.option-list', '.data-option-list>div')
+                    .on('mousedown.option-list', '.data-option-list>div', function() {
+                        let input = $(this).parent().prev('input[data-option-list]');
+                        $(this).parent().prev('input[data-option-list]').val('').focus();
+                        document.execCommand('insertText', false, $(this).text());
+                    });
+            }
+            addMCInitializer('option-list', init);
+        })();
+    </script>
     @include('app/pdf/viewer')
 </body>