From c6156a8d8a67d94dd0a2cada336c6f56cc5f874f Mon Sep 17 00:00:00 2001
From: Hk-Gosuto <yominogosuto@gmail.com>
Date: Tue, 10 Dec 2024 04:12:13 +0000
Subject: [PATCH] feat: #326

---
 app/components/ui-lib.module.scss |  1 +
 app/components/ui-lib.tsx         | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 1f1e6a33316..3be44319778 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -323,6 +323,7 @@
     border: none;
     outline: none;
     font-size: 14px;
+    text-align: left;
   }
 
   &-search-input:focus {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index ee78126b54f..344e170c642 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -503,14 +503,27 @@ export function SearchSelector<T>(props: {
     }
   };
 
+  const { items, onClose } = props;
   // 过滤列表项
-  const filteredItems = props.items.filter(
+  const filteredItems = items.filter(
     (item) =>
       item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
       (item.subTitle &&
         item.subTitle.toLowerCase().includes(searchQuery.toLowerCase())),
   );
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
   return (
     <div className={styles["selector"]} onClick={() => props.onClose?.()}>
       <div
@@ -522,6 +535,7 @@ export function SearchSelector<T>(props: {
           <div className={styles["selector-search"]}>
             <input
               type="text"
+              autoFocus
               className={styles["selector-search-input"]}
               placeholder="search model"
               value={searchQuery}