From dcf34a7ac236b96b1302ec2eae155b8f2d3784ef Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Fri, 23 May 2025 17:37:28 +0200 Subject: [PATCH] fix(ContextMenu/DropdownMenu): wrap groups in a viewport Resolves #3315 --- src/runtime/components/ContextMenuContent.vue | 114 +- .../components/DropdownMenuContent.vue | 118 +- src/theme/context-menu.ts | 3 +- src/theme/dropdown-menu.ts | 3 +- .../ContextMenu-vue.spec.ts.snap | 1104 ++++++++-------- .../__snapshots__/ContextMenu.spec.ts.snap | 1168 +++++++++-------- .../DropdownMenu-vue.spec.ts.snap | 846 ++++++------ .../__snapshots__/DropdownMenu.spec.ts.snap | 914 ++++++------- 8 files changed, 2210 insertions(+), 2060 deletions(-) diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue index 159cda1f..8f617f75 100644 --- a/src/runtime/components/ContextMenuContent.vue +++ b/src/runtime/components/ContextMenuContent.vue @@ -109,68 +109,70 @@ const groups = computed(() => - - + + diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue index d31095f2..c9e52124 100644 --- a/src/runtime/components/DropdownMenuContent.vue +++ b/src/runtime/components/DropdownMenuContent.vue @@ -115,70 +115,72 @@ const groups = computed(() => - - + + diff --git a/src/theme/context-menu.ts b/src/theme/context-menu.ts index 03d14df9..9a49e6b7 100644 --- a/src/theme/context-menu.ts +++ b/src/theme/context-menu.ts @@ -2,7 +2,8 @@ import type { ModuleOptions } from '../module' export default (options: Required) => ({ slots: { - content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin)', + content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col', + viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts index 2ceb9ff6..c47b132f 100644 --- a/src/theme/dropdown-menu.ts +++ b/src/theme/dropdown-menu.ts @@ -2,7 +2,8 @@ import type { ModuleOptions } from '../module' export default (options: Required) => ({ slots: { - content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)', + content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col', + viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1', arrow: 'fill-default', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', diff --git a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap index 03d57bb8..41a6379b 100644 --- a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap @@ -7,40 +7,42 @@ exports[`ContextMenu > renders with class correctly 1`] = `
-