Fix up/down arrow keys on model selects

ui/media/js/searchable-models.js

@@ -62,6 +62,9 @@ class ModelDropdown
             this.modelFilterArrow.style.color = state ? 'dimgray' : ''
         }
     }
+    get modelElements() {
+        return this.modelList.querySelectorAll('.model-file')
+    }
     addEventListener(type, listener, options) {
         return this.modelFilter.addEventListener(type, listener, options)
     }
@@ -116,12 +119,13 @@ class ModelDropdown
     }
 
     getPreviousVisibleSibling(elem) {
-        let prevSibling = elem.previousElementSibling
+        const modelElements = Array.from(this.modelElements)
-        while (prevSibling && prevSibling.classList.contains('model-file')) {
+        const index = modelElements.indexOf(elem)
-            if (prevSibling.style.display == 'list-item') return prevSibling
+        if (index <= 0) {
-            prevSibling = prevSibling.previousElementSibling
+            return undefined
         }
-        if (prevSibling && prevSibling.style.display == 'list-item') return prevSibling
+
+        return modelElements.slice(0, index).reverse().find(e => e.style.display === 'list-item')
     }
 
     getLastVisibleChild(elem) {
@@ -130,35 +134,10 @@ class ModelDropdown
         return this.getPreviousVisibleSibling(lastElementChild)
     }
     
-    findPreviousSibling(elem) {
-        // is there an immediate sibling?
-        let prevSibling = this.getPreviousVisibleSibling(elem)
-        if (prevSibling) {
-            // if the previous sibling is a model file, just select it
-            if (prevSibling.classList.contains('model-file')) return prevSibling
-            
-            // if the previous sibling is a model folder, select the last model file it contains
-            if (prevSibling.classList.contains('model-folder')) return prevSibling.firstElementChild.lastElementChild
-        }
-
-        // no sibling model file and no sibling model folder. look for siblings around the parent element.
-        prevSibling = this.getPreviousVisibleSibling(elem.parentElement.parentElement)
-        if (prevSibling) {
-            // if the previous entry is a model file, select it
-            if (prevSibling.classList.contains('model-file')) return prevSibling
-
-            // is there another model folder to jump to before the current one?
-            if (prevSibling.classList.contains('model-folder')) return this.getLastVisibleChild(prevSibling.firstElementChild)
-        }
-    }
-    
     getNextVisibleSibling(elem) {
-        let nextSibling = elem.nextElementSibling
+        const modelElements = Array.from(this.modelElements)
-        while (nextSibling && nextSibling.classList.contains('model-file')) {
+        const index = modelElements.indexOf(elem)
-            if (nextSibling.style.display == 'list-item') return nextSibling
+        return modelElements.slice(index + 1).find(e => e.style.display === 'list-item')
-            nextSibling = nextSibling.nextElementSibling
-        }
-        if (nextSibling && nextSibling.style.display == 'list-item') return nextSibling
     }
     
     getFirstVisibleChild(elem) {
@@ -167,28 +146,6 @@ class ModelDropdown
         return this.getNextVisibleSibling(firstElementChild)
     }
     
-    findNextSibling(elem) {
-        // is there an immediate sibling?
-        let nextSibling = this.getNextVisibleSibling(elem)
-        if (nextSibling) {
-            // if the next sibling is a model file, just select it
-            if (nextSibling.classList.contains('model-file')) return nextSibling
-            
-            // if the next sibling is a model folder, select the first model file it contains
-            if (nextSibling.classList.contains('model-folder')) return nextSibling.firstElementChild.firstElementChild
-        }
-
-        // no sibling model file and no sibling model folder. look for siblings around the parent element.
-        nextSibling = this.getNextVisibleSibling(elem.parentElement.parentElement)
-        if (nextSibling) {
-            // if the next entry is a model file, select it
-            if (nextSibling.classList.contains('model-file')) return nextSibling
-
-            // is there another model folder to jump to after the current one?
-            if (nextSibling.classList.contains('model-folder')) return this.getFirstVisibleChild(nextSibling.firstElementChild)
-        }
-    }
-    
     selectModelEntry(elem) {
         if (elem) {
             if (this.highlightedModelEntry !== undefined) {
@@ -202,7 +159,7 @@ class ModelDropdown
     }
     
     selectPreviousFile() {
-        const elem = this.findPreviousSibling(this.highlightedModelEntry)
+        const elem = this.getPreviousVisibleSibling(this.highlightedModelEntry)
         if (elem) {
             this.selectModelEntry(elem)
         }
@@ -215,7 +172,7 @@ class ModelDropdown
     }
     
     selectNextFile() {
-        this.selectModelEntry(this.findNextSibling(this.highlightedModelEntry))
+        this.selectModelEntry(this.getNextVisibleSibling(this.highlightedModelEntry))
         this.modelFilter.select()
     }
     
@@ -374,13 +331,13 @@ class ModelDropdown
     
     selectEntry(path) {
         if (path !== undefined) {
-            const entries = this.modelList.querySelectorAll('.model-file');
+            const entries = this.modelElements;
 
-            for (let i = 0; i < entries.length; i++) {
+            for (const elem of entries) {
-                if (entries[i].dataset.path == path) {
+                if (elem.dataset.path == path) {
-                    this.saveCurrentSelection(entries[i], entries[i].innerText, entries[i].dataset.path)
+                    this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
-                    this.highlightedModelEntry = entries[i]
+                    this.highlightedModelEntry = elem
-                    entries[i].scrollIntoView({block: 'nearest'})
+                    elem.scrollIntoView({block: 'nearest'})
                     break
                 }
             }
@@ -454,7 +411,7 @@ class ModelDropdown
         if (found) {
             this.modelResult.style.display = 'list-item'
             this.modelNoResult.style.display = 'none'
-            const elem = this.findNextSibling(this.modelList.querySelector('.model-file'))
+            const elem = this.getNextVisibleSibling(this.modelList.querySelector('.model-file'))
             this.highlightModel(elem)
             elem.scrollIntoView({block: 'nearest'})
         }