fix(Menu): stop propagation onEscape only if needed

rotki · Jun 20, 2024 · 959e741 · 959e741
1 parent fe86af2
commit 959e741
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/forms/select/RuiMenuSelect.spec.ts b/src/components/forms/select/RuiMenuSelect.spec.ts
@@ -3,11 +3,20 @@ import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 import RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';
 import { options } from '@/__test__/options';
 
+vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+  const now = Date.now();
+  cb(now);
+  return now;
+});
+
 function createWrapper<T extends string | object>(options?: ComponentMountingOptions<typeof RuiMenuSelect<T>>) {
   const opts: ComponentMountingOptions<typeof RuiMenuSelect<T>> = {
     ...options,
     global: {
-      stubs: ['RuiProgress'],
+      stubs: {
+        RuiProgress: true,
+        TransitionGroup: false,
+      },
     },
   };
   return mount(RuiMenuSelect, opts);

diff --git a/src/components/overlays/menu/RuiMenu.vue b/src/components/overlays/menu/RuiMenu.vue
@@ -81,9 +81,12 @@ const { width } = useElementSize(activator);
 
 const click = ref<boolean>(false);
 
-function onLeave() {
+function onLeave(event?: KeyboardEvent) {
+  if (!get(open))
+    return;
   onClose();
   set(click, false);
+  event?.stopPropagation();
 }
 
 function checkClick() {
@@ -142,7 +145,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
 </script>
 
 <template>
-  <div @keydown.esc.exact.stop="onLeave()">
+  <div @keydown.esc="onLeave()">
     <div
       ref="activator"
       :class="[css.wrapper, wrapperClass, { 'w-full': fullWidth }]"