Fix data-option-list behavior

public/css/style.css

@@ -1141,20 +1141,21 @@ table.table-edit-sheet .ql-editor[contenteditable] {
 .data-option-list {
     position: absolute;
     background: #fff;
-    border: 1px solid #ddd;
+    border: 2px solid #ddd;
     margin-top: -1px;
     width: 100%;
     z-index: 1;
     display: none;
-}
-input[data-option-list]:focus+.data-option-list {
-    display: block;
+    max-width: 250px;
+    box-shadow: 0 0 3px #ddd;
+    border-top: 0;
 }
 .data-option-list>div {
     cursor: pointer;
-    padding: 0.3rem 0.5rem;
+    padding: 0.2rem 0.5rem;
     border-bottom: 1px solid #ddd;
     color: #666;
+    font-size: 90%;
 }
 .data-option-list>div:last-child {
     border-bottom: 0;

public/js/option-list.js

@@ -1,13 +1,38 @@
 (function() {
+    function showOptionsList(_input) {
+        let ol = $(_input).next('.data-option-list');
+        if(ol.length && !ol.is(':visible')) {
+            ol.show();
+        }
+    }
+    function hideOptionsList(_input) {
+        let ol = $(_input).next('.data-option-list');
+        if(ol.length && ol.is(':visible')) {
+            ol.hide();
+        }
+    }
     function init() {
         $(document)
             .off('mousedown.option-list', '.data-option-list>div')
             .on('mousedown.option-list', '.data-option-list>div', function() {
-                console.log(12);
                 $(this).parent().prev('input[data-option-list]').val('').focus();
                 document.execCommand('insertText', false, $(this).text());
+                $(this).closest('.data-option-list').hide();
                 return false;
             });
+        $(document)
+            .off('click.trigger-option-list', 'input[data-option-list]')
+            .on('click.trigger-option-list', 'input[data-option-list]', function() {
+                showOptionsList(this);
+            })
+            .off('focus.trigger-option-list', 'input[data-option-list]')
+            .on('focus.trigger-option-list', 'input[data-option-list]', function() {
+                showOptionsList(this);
+            })
+            .off('blur.trigger-option-list', 'input[data-option-list]')
+            .on('blur.trigger-option-list', 'input[data-option-list]', function() {
+                hideOptionsList(this);
+            });
     }
     addMCInitializer('option-list', init);
 })();