fix: search-panel when ArrowUp and ArrowDown (#7922)

packages/effects/layouts/src/widgets/global-search/search-panel.vue

@@ -11,7 +11,12 @@ import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
 import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
 import { isHttpUrl } from '@vben-core/shared/utils';
 
-import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
+import {
+  onKeyStroke,
+  useEventListener,
+  useLocalStorage,
+  useThrottleFn,
+} from '@vueuse/core';
 
 defineOptions({
   name: 'SearchPanel',
@@ -34,6 +39,7 @@ const searchHistory = useLocalStorage<MenuRecordRaw[]>(
 const activeIndex = ref(-1);
 const searchItems = shallowRef<MenuRecordRaw[]>([]);
 const searchResults = ref<MenuRecordRaw[]>([]);
+const isNavigating = ref(false);
 
 const handleSearch = useThrottleFn(search, 200);
 
@@ -116,6 +122,7 @@ function handleUp() {
   if (searchResults.value.length === 0) {
     return;
   }
+  isNavigating.value = true;
   activeIndex.value--;
   if (activeIndex.value < 0) {
     activeIndex.value = searchResults.value.length - 1;
@@ -128,6 +135,7 @@ function handleDown() {
   if (searchResults.value.length === 0) {
     return;
   }
+  isNavigating.value = true;
   activeIndex.value++;
   if (activeIndex.value > searchResults.value.length - 1) {
     activeIndex.value = 0;
@@ -143,6 +151,7 @@ function handleClose() {
 
 // Activate when the mouse moves to a certain line
 function handleMouseenter(e: MouseEvent) {
+  if (isNavigating.value) return;
   const index = (e.target as HTMLElement)?.dataset.index;
   activeIndex.value = Number(index);
 }
@@ -221,6 +230,10 @@ onMounted(() => {
   // esc close
   onKeyStroke('Escape', handleClose);
 });
+
+useEventListener('mousemove', () => {
+  isNavigating.value = false;
+});
 </script>
 
 <template>