From 074a14f05677be2840a608c57588f0914b4019bf Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Mon, 13 Feb 2023 01:37:00 -0800
Subject: [PATCH] Second batch of fixes for search models

Addresses the issues reported by JeLuf:
- - gfpgan: the list with models doesn't appear under the <input> box
- merge models: As long as no models are selected, the <input> box is very short.
- When searching for models by name, the width of the model list shrinks and is smaller than the <input> element.
---
 ui/media/js/searchable-models.js | 54 +++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index bdd81117..d28bbcdf 100644
--- a/ui/media/js/searchable-models.js
+++ b/ui/media/js/searchable-models.js
@@ -85,6 +85,14 @@ class ModelDropdown
             this.inputModels = modelsOptions[this.modelKey]
             this.populateModels()
         }, this))
+        document.addEventListener("collapsibleClick", this.bind(function(e) {
+            // update the input size when the element becomes visible
+            this.updateInputSize()
+        }, this))
+        document.addEventListener("tabClick", this.bind(function(e) {
+            // update the input size when the tab changes
+            this.updateInputSize()
+        }, this))
     }
 
     saveCurrentSelection(elem, value, path) {
@@ -455,6 +463,47 @@ class ModelDropdown
     }
 
     /* MODEL LOADER */
+    getElementDimensions(element) {
+        // Clone the element
+        const clone = element.cloneNode(true)
+        
+        // Copy the styles of the original element to the cloned element
+        const originalStyles = window.getComputedStyle(element)
+        for (let i = 0; i < originalStyles.length; i++) {
+            const property = originalStyles[i]
+            clone.style[property] = originalStyles.getPropertyValue(property)
+        }
+        
+        // Set its visibility to hidden and display to inline-block
+        clone.style.visibility = "hidden"
+        clone.style.display = "inline-block"
+        
+        // Put the cloned element next to the original element
+        element.parentNode.insertBefore(clone, element.nextSibling)
+        
+        // Get its width and height
+        const width = clone.offsetWidth
+        const height = clone.offsetHeight
+        
+        // Remove it from the DOM
+        clone.remove()
+        
+        // Return its width and height
+        return { width, height }
+    }
+    
+    updateInputSize() {
+        if (this.modelList !== undefined) {
+            const dimensions = this.getElementDimensions(this.modelList)
+            this.modelFilter.style.width = dimensions.width + 'px'
+            this.modelList.style.width = dimensions.width + 'px'
+            this.modelFilterArrow.style.height = dimensions.height + 'px'
+            if (this.modelFilter.offsetLeft > 0) {
+                this.modelList.style.left = this.modelFilter.offsetLeft + 'px'
+            }
+        }
+    }
+    
     flattenModelList(models, path) {
         models.forEach(entry => {
             if (Array.isArray(entry)) {
@@ -521,10 +570,7 @@ class ModelDropdown
         this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`)
         this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
         this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)
-        this.modelList.style.display = 'block'
-        this.modelFilter.style.width = this.modelList.offsetWidth + 'px'
-        this.modelFilterArrow.style.height = this.modelFilter.offsetHeight + 'px'
-        this.modelList.style.display = 'none'
+        this.updateInputSize()
         
         if (this.modelFilterInitialized !== true) {
             this.modelFilter.addEventListener('input', this.bind(this.filterList, this))