From e3226bb182ab333eda1936c04b99f63d20e4c392 Mon Sep 17 00:00:00 2001
From: Christian Bastian <80225746+cdb-boop@users.noreply.github.com>
Date: Sat, 6 Apr 2024 15:26:14 -0400
Subject: [PATCH] Improved blur for search inputs.

- Blur model download url search on enter.
- Blur custom preview search and enter, and update preview image on enter.
---
 web/model-manager.js | 65 ++++++++++++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index 79c6701..8295ebf 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -503,6 +503,33 @@ class ImageSelect {
             el_uploadFile,
         ]);
         
+        /**
+         * @param {string} url 
+         * @returns {Promise<string>}
+         */
+        const getCustomPreviewUrl = async (url) => {
+            if (url.startsWith(Civitai.imagePostUrlPrefix())) {
+                return await Civitai.getImageInfo(url)
+                .then((imageInfo) => {
+                    const items = imageInfo["items"];
+                    if (items.length > 0) {
+                        return items[0]["url"];
+                    }
+                    else {
+                        console.warn("Civitai /api/v1/images returned 0 items.");
+                        return url;
+                    }
+                })
+                .catch((error) => {
+                    console.error("Failed to get image info from Civitai!", error);
+                    return url;
+                });
+            }
+            else {
+                return url;
+            }
+        };
+        
         const el_customUrlPreview = $el("img", {
             $: (el) => (this.elements.customUrlPreview = el),
             src: PREVIEW_NONE_URI,
@@ -517,6 +544,14 @@ class ImageSelect {
             name: "custom preview image url",
             autocomplete: "off",
             placeholder: "https://custom-image-preview.png",
+            onkeydown: async (e) => {
+                if (e.key === "Enter") {
+                    const value = e.target.value;
+                    el_customUrlPreview.src = await getCustomPreviewUrl(value);
+                    e.stopPropagation();
+                    e.target.blur();
+                }
+            },
         });
         const el_custom = $el("div.row.tab-header-flex-block", {
             $: (el) => (this.elements.custom = el),
@@ -527,26 +562,9 @@ class ImageSelect {
                 textContent: "🔍︎",
                 onclick: async (e) => {
                     const value = el_customUrl.value;
-                    if (value.startsWith(Civitai.imagePostUrlPrefix())) {
-                        el_customUrlPreview.src = await Civitai.getImageInfo(value)
-                        .then((imageInfo) => {
-                            const items = imageInfo["items"];
-                            if (items.length > 0) {
-                                return items[0]["url"];
-                            }
-                            else {
-                                console.warn("Civitai /api/v1/images returned 0 items.");
-                                return value;
-                            }
-                        })
-                        .catch((error) => {
-                            console.error("Failed to get image info from Civitai!", error);
-                            return value;
-                        });
-                    }
-                    else {
-                        el_customUrlPreview.src = value;
-                    }
+                    el_customUrlPreview.src = await getCustomPreviewUrl(value);
+                    e.stopPropagation();
+                    el_customUrl.blur();
                 },
             }),
         ]);
@@ -2615,6 +2633,7 @@ class DownloadTab {
                         if (e.key === "Enter") {
                             e.stopPropagation();
                             await update();
+                            e.target.blur();
                         }
                     },
                 }),
@@ -2718,6 +2737,12 @@ class DownloadTab {
             autocomplete: "off",
             placeholder: default_name,
             value: default_name,
+            onkeydown: (e) => {
+                if (e.key === "Enter") {
+                    e.stopPropagation();
+                    e.target.blur();
+                }
+            },
         });
         
         const filepath = info["downloadFilePath"];