Improve dropdown menus

- Up/Down changes selected
- Input can still be typed in

editor/src/index.js

@@ -13,7 +13,7 @@ import 'jquery-contextmenu';
 import getCaretCoordinates from './caret-position'
 import moment from 'moment'
 import mermaid from 'mermaid'
-import { parseDOTNetwork, Network } from "vis-network/peer";
+import {Network, parseDOTNetwork} from "vis-network/peer";
 import PrismJS from 'prismjs'
 import 'prismjs/plugins/filter-highlight-all/prism-filter-highlight-all'
 import 'prismjs/components/prism-php'
@@ -87,7 +87,10 @@ function addIndicator(editor, indicator) {
 let holder = document.getElementById('editor');
 
 function showSearchResults(searchTool, query, input, value, resultType) {
-    showSearchResultsExtended('#link-complete', 'link-template', searchTool, query, input, value, resultType, {showOnlyResults:true, belowCursor: true})
+    showSearchResultsExtended('#link-complete', 'link-template', searchTool, query, input, value, resultType, {
+        showOnlyResults: true,
+        belowCursor: true
+    })
 }
 
 function showSearchResultsExtended(element, template, searchTool, query, input, value, resultType, options) {
@@ -113,6 +116,16 @@ function showSearchResultsExtended(element, template, searchTool, query, input,
 
     var templateText = document.getElementById(template).innerHTML;
     var rendered = Mustache.render(templateText, {page: value, results: results}, {}, ['[[', ']]']);
+    let selected = $lc.find('li.selected');
+    if (selected) {
+        let selectedPos = $lc.find('li').index(selected[0])
+        rendered = $(rendered)
+        const $lis = $lc.find('li')
+        if ($lis.length >= 1) {
+            selectedPos = Math.min(selectedPos, $lis.length - 1)
+            rendered.find('li')[selectedPos].classList.add('selected')
+        }
+    }
     $lc.html(rendered).fadeIn()
 }
 
@@ -126,37 +139,6 @@ $(document).on('keydown', '.keyboard-list', function (event) {
         $popup.fadeOut()
         return false
     }
-    if (event.key === 'Enter') {
-        const element = $popup.find('li.selected')
-        const linkName = element.text()
-        $popup.trigger('popup:selected', [linkName, $popup.data('result-type'), element])
-        $popup.fadeOut()
-        return false
-    }
-    if (event.key === 'ArrowUp') {
-        const selected = $popup.find('li.selected')
-        const prev = selected.prev('li')
-        if (prev.length) {
-            prev.addClass('selected')
-            selected.removeClass('selected')
-            prev[0].scrollIntoView({block: 'center', inline: 'nearest'})
-        } else {
-            // move back from dropdown to input
-            $popup.trigger('popup:leave')
-            selected.removeClass('selected')
-        }
-        return false
-    }
-    if (event.key === 'ArrowDown') {
-        const selected = $popup.find('li.selected')
-        const next = selected.next('li');
-        if (next.length) {
-            next.addClass('selected')
-            selected.removeClass('selected')
-            next[0].scrollIntoView({block: 'center', inline: 'nearest'})
-        }
-        return false
-    }
 
     return true
 })
@@ -207,7 +189,7 @@ if (holder) {
         linkify: true,
         highlight: function (str, lang) {
             if (lang === 'mermaid') {
-                return '<div class="mermaid">'+str+'</div>';
+                return '<div class="mermaid">' + str + '</div>';
             }
             return '';
         }
@@ -323,11 +305,39 @@ if (holder) {
                 if (event.key === 'Escape' && isVisible) {
                     $lc.fadeOut()
                     return false
-                }
+                } else if (event.key === 'Enter' && isVisible) {
+                    const element = $lc.find('li.selected')
+                    const linkName = element.text()
+                    $lc.trigger('popup:selected', [linkName, $lc.data('result-type'), element])
+                    $lc.fadeOut()
+                    return false
+                } else if (event.key === 'ArrowUp' && isVisible) {
+                    const selected = $lc.find('li.selected')
+                    const prev = selected.prev('li')
+                    if (prev.length) {
+                        prev.addClass('selected')
+                        selected.removeClass('selected')
+                        prev[0].scrollIntoView({block: 'center', inline: 'nearest'})
+                    } else {
+                        // move back from dropdown to input
+                        $lc.trigger('popup:leave')
+                        selected.removeClass('selected')
+                    }
+                    return false
+                } else if (event.key === 'ArrowDown' && isVisible) {
+                    const selected = $lc.find('li.selected')
+                    if (!selected.length) {
+                        $lc.find('li:not(.selected):first-child').addClass('selected')
+                        return false
+                    }
+
+                    const next = selected.next('li');
+                    if (next.length) {
+                        next.addClass('selected')
+                        selected.removeClass('selected')
+                        next[0].scrollIntoView({block: 'center', inline: 'nearest'})
+                    }
 
-                if (event.key === 'ArrowDown' && isVisible) {
-                    $lc.focus()
-                    $lc.find('li:first-child').addClass('selected')
                     return false
                 }
 
@@ -362,6 +372,15 @@ if (holder) {
                     searchEnabled = false
                     return false;
                 }
+                const ignoreKeys = {
+                    'ArrowUp': true,
+                    'ArrowDown': true,
+                    'Enter': true,
+                }
+
+                if (event.key in ignoreKeys) {
+                    return false
+                }
 
                 let value = input.value
                 let end = input.selectionEnd

templates/layout.html

@@ -288,7 +288,7 @@
 
     <div id="save-indicator" class="hide"></div>
 </div>
-<div id="link-complete" class="hide keyboard-list" tabindex="0"></div>
+<div id="link-complete" class="hide keyboard-list"></div>
 {{ block "footer_scripts" . }}
 {{ end }}
 <div id="result-template" class="hide">