From 336e8acd0bdb0c757f1e0e3ad9c221fa8ae8fb75 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 23 Feb 2024 13:09:14 -0800
Subject: [PATCH] fix: improves fuzzy by using key down instead of up (#2790)

---
 assets/components/FuzzySearchModal.spec.ts |  2 +-
 assets/components/FuzzySearchModal.vue     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/components/FuzzySearchModal.spec.ts b/assets/components/FuzzySearchModal.spec.ts
index edaa0b9d..5f48eca3 100644
--- a/assets/components/FuzzySearchModal.spec.ts
+++ b/assets/components/FuzzySearchModal.spec.ts
@@ -73,7 +73,7 @@ describe("<FuzzySearchModal />", () => {
   test("choose baz", async () => {
     const wrapper = createFuzzySearchModal();
     await wrapper.find("input").setValue("baz");
-    await wrapper.find("input").trigger("keyup.enter");
+    await wrapper.find("input").trigger("keydown.enter");
     expect(useRouter().push).toHaveBeenCalledWith({ name: "container-id", params: { id: "567" } });
   });
 });
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 55c0da4a..e4478530 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -4,12 +4,12 @@
       <mdi:magnify class="flex size-8" />
       <input
         tabindex="0"
-        class="input input-ghost input-lg flex-1 px-1"
+        class="input input-lg input-ghost flex-1 px-1"
         ref="input"
-        @keyup.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
-        @keyup.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
-        @keyup.enter.exact="selected(data[selectedIndex].item)"
-        @keyup.alt.enter="addColumn(data[selectedIndex])"
+        @keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
+        @keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
+        @keydown.enter.exact="selected(data[selectedIndex].item)"
+        @keydown.alt.enter="addColumn(data[selectedIndex])"
         v-model="query"
         :placeholder="$t('placeholder.search-containers')"
       />
@@ -148,4 +148,8 @@ function matchedName({ item, matches = [] }: { item: { name: string }; matches?:
 :deep(mark) {
   @apply bg-transparent text-inherit underline underline-offset-2;
 }
+
+.menu a {
+  @apply transition-none duration-0;
+}
 </style>