Model search bug fixes

First batch of bug fixes for model search:
- fix navigation issues with arrow keys when filtering models
- fix the issue with arrow keys jumping several entries after model reloading
- disable autocomplete in search box

ui/index.html

@@ -127,7 +127,7 @@
                     <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
                     <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
                     <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input">
-                        <input id="stable_diffusion_model" type="text" spellcheck="false" class="model-filter" data-path="" />
+                        <input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                         <button id="reload-models" class="secondaryButton reloadModels"><i class='fa-solid fa-rotate'></i></button>
                         <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
                     </td></tr>
@@ -136,7 +136,7 @@
                         </select>
                     </td></tr> -->
                     <tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
-                        <input id="vae_model" type="text" spellcheck="false" class="model-filter" data-path="" />
+                        <input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                         <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
                     </td></tr>
                     <tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td>
@@ -208,7 +208,7 @@
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
                     <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr>
                     <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
-                        <input id="hypernetwork_model" type="text" spellcheck="false" class="model-filter" data-path="" />
+                        <input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                     </td></tr>
                     <tr id="hypernetwork_strength_container" class="pl-5">
                         <td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td>

ui/media/js/searchable-models.js

@@ -12,7 +12,7 @@ Merely calling getModels() makes all the magic happen behind the scene to refres
 
 HOW TO CREATE A MODEL DROPDOWN:
 1) Create an input element. Make sure to add a data-path property, as this is how model dropdowns are identified in auto-save.js.
-<input id="stable_diffusion_model" type="text" spellcheck="false" class="model-filter" data-path="" />
+<input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
 
 2) Just declare one of these for your own dropdown (remember to change the element id, e.g. #stable_diffusion_models to your own input's id).
 let stableDiffusionModelField = new ModelDropdown(document.querySelector('#stable_diffusion_model'), 'stable-diffusion')
@@ -37,6 +37,7 @@ class ModelDropdown
     modelKey //= undefined
     flatModelList //= []
     noneEntry //= ''
+    modelFilterInitialized //= undefined
 
     /* MIMIC A REGULAR INPUT FIELD */
     get parentElement() {
@@ -105,9 +106,24 @@ class ModelDropdown
         }
     }
 
+    getPreviousVisibleSibling(elem) {
+        let prevSibling = elem.previousElementSibling
+        while (prevSibling && prevSibling.classList.contains('model-file')) {
+            if (prevSibling.style.display == 'list-item') return prevSibling
+            prevSibling = prevSibling.previousElementSibling
+        }
+        if (prevSibling && prevSibling.style.display == 'list-item') return prevSibling
+    }
+
+    getLastVisibleChild(elem) {
+        let lastElementChild = elem.lastElementChild
+        if (lastElementChild.style.display == 'list-item') return lastElementChild
+        return this.getPreviousVisibleSibling(lastElementChild)
+    }
+    
     findPreviousSibling(elem) {
         // is there an immediate sibling?
-        let prevSibling = elem.previousElementSibling
+        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
@@ -117,19 +133,34 @@ class ModelDropdown
         }
 
         // no sibling model file and no sibling model folder. look for siblings around the parent element.
-        prevSibling = elem.parentElement.parentElement.previousElementSibling
+        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 prevSibling.firstElementChild.lastElementChild
+            if (prevSibling.classList.contains('model-folder')) return this.getLastVisibleChild(prevSibling.firstElementChild)
         }
     }
     
+    getNextVisibleSibling(elem) {
+        let nextSibling = elem.nextElementSibling
+        while (nextSibling && nextSibling.classList.contains('model-file')) {
+            if (nextSibling.style.display == 'list-item') return nextSibling
+            nextSibling = nextSibling.nextElementSibling
+        }
+        if (nextSibling && nextSibling.style.display == 'list-item') return nextSibling
+    }
+    
+    getFirstVisibleChild(elem) {
+        let firstElementChild = elem.firstElementChild
+        if (firstElementChild.style.display == 'list-item') return firstElementChild
+        return this.getNextVisibleSibling(firstElementChild)
+    }
+    
     findNextSibling(elem) {
         // is there an immediate sibling?
-        let nextSibling = elem.nextElementSibling
+        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
@@ -139,13 +170,13 @@ class ModelDropdown
         }
 
         // no sibling model file and no sibling model folder. look for siblings around the parent element.
-        nextSibling = elem.parentElement.parentElement.nextElementSibling
+        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 nextSibling.firstElementChild.firstElementChild
+            if (nextSibling.classList.contains('model-folder')) return this.getFirstVisibleChild(nextSibling.firstElementChild)
         }
     }
     
@@ -219,6 +250,7 @@ class ModelDropdown
                     {
                         this.saveCurrentSelection(this.highlightedModelEntry, this.highlightedModelEntry.innerText, this.highlightedModelEntry.dataset.path)
                         this.hideModelList()
+                        this.showAllEntries()
                     }
                     this.modelFilter.focus()
                 }
@@ -493,12 +525,16 @@ class ModelDropdown
         this.modelFilter.style.width = this.modelList.offsetWidth + 'px'
         this.modelFilterArrow.style.height = this.modelFilter.offsetHeight + 'px'
         this.modelList.style.display = 'none'
-    
+        
-        this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
+        if (this.modelFilterInitialized !== true) {
-        this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
+            this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
-        this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
+            this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
-        this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
+            this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
-        this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
+            this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
+            this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
+
+            this.modelFilterInitialized = true
+        }
         this.modelFilterArrow.addEventListener('mousedown', this.bind(this.toggleModelList, this))
         this.modelList.addEventListener('mousemove', this.bind(this.highlightModelAtPosition, this))
         this.modelList.addEventListener('mousedown', this.bind(this.processClick, this))