1 files changed, 40 insertions, 24 deletions
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index dd63506..78d6fd7 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,23 +1,24 @@
 <script lang="ts" setup>
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import { useTracker } from '@/modules/tracker/tracker.services';
 import { tools } from '@/tools';
 import type { Tool } from '@/tools/tools.types';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
+import type { NInput } from 'naive-ui';
 import { computed, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import SearchBarItem from './SearchBarItem.vue';
 
-const router = useRouter();
-const queryString = ref('');
+const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
 
-const { searchResult } = useFuzzySearch({
-  search: queryString,
-  data: tools,
-  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
-});
+const router = useRouter();
+const { tracker } = useTracker();
 
-const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
+const queryString = ref('');
+const inputEl = ref<HTMLElement>();
+const displayDropDown = ref(true);
+const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
 
 const options = computed(() => {
   if (queryString.value === '') {
@@ -27,12 +28,11 @@ const options = computed(() => {
   return searchResult.value.map(toolToOption);
 });
 
-function onSelect(path: string) {
-  router.push(path);
-  queryString.value = '';
-}
-
-const focusTarget = ref();
+const { searchResult } = useFuzzySearch({
+  search: queryString,
+  data: tools,
+  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
+});
 
 const keys = useMagicKeys({
   passive: false,
@@ -47,18 +47,33 @@ const keys = useMagicKeys({
   },
 });
 
-whenever(keys.ctrl_k, () => {
-  focusTarget.value.focus();
-});
-whenever(keys.meta_k, () => {
-  focusTarget.value.focus();
-});
+whenever(keys.ctrl_k, claimFocus);
+whenever(keys.meta_k, claimFocus);
+whenever(keys.escape, releaseFocus);
 
 function renderOption({ tool }: { tool: Tool }) {
   return h(SearchBarItem, { tool });
 }
 
-const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
+function onSelect(path: string) {
+  router.push(path);
+  queryString.value = '';
+}
+
+function claimFocus() {
+  displayDropDown.value = true;
+
+  inputEl.value?.focus();
+}
+
+function releaseFocus() {
+  displayDropDown.value = false;
+}
+
+function onFocus() {
+  tracker.trackEvent({ eventName: 'Search-bar focused' });
+  displayDropDown.value = true;
+}
 </script>
 
 <template>
@@ -69,12 +84,13 @@ const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('
       :on-select="(value) => onSelect(String(value))"
       :render-label="renderOption"
       :default-value="'aa'"
-      :get-show="() => true"
-      :on-focus="() => $tracker.trackEvent({ eventName: 'Search-bar focused' })"
+      :get-show="() => displayDropDown"
+      :on-focus="onFocus"
+      @update:value="() => (displayDropDown = true)"
     >
       <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
         <n-input
-          ref="focusTarget"
+          ref="inputEl"
           round
           clearable
           :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"