From f7ed8b31997b780ec01cbb24b4f90ea6e7a8e1ea Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Sat, 6 Jul 2024 18:13:52 +0800
Subject: [PATCH] fix: prevent default searching in browser

---
 .../src/global-search/global-search.vue       | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/business/widgets/src/global-search/global-search.vue b/packages/business/widgets/src/global-search/global-search.vue
index da2a24b4..1ab34cf4 100644
--- a/packages/business/widgets/src/global-search/global-search.vue
+++ b/packages/business/widgets/src/global-search/global-search.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@vben/types';
 
-import { ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { $t } from '@vben/locales';
 import {
@@ -46,15 +46,37 @@ function handleClose() {
   keyword.value = '';
 }
 
-if (props.enableShortcutKey) {
-  const keys = useMagicKeys();
-  const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
-  whenever(cmd, () => {
-    if (props.enableShortcutKey) {
-      open.value = true;
-    }
+const keys = useMagicKeys();
+const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
+whenever(cmd, () => {
+  if (props.enableShortcutKey) {
+    open.value = true;
+  }
+});
+
+const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
+  if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+  }
+};
+
+const toggleKeydownListener = () => {
+  if (props.enableShortcutKey) {
+    window.addEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  } else {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  }
+};
+
+watch(() => props.enableShortcutKey, toggleKeydownListener);
+
+onMounted(() => {
+  toggleKeydownListener();
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
   });
-}
+});
 </script>
 
 <template>