fix: close other open toolbar menus when a menu button is clicked
The toggle button used @click.stop, which halted the click before it reached the document-level outside-click listeners. As a result, opening one dropdown (e.g. export) left a previously-opened dropdown (e.g. generate) still open. The containment check in handleDocumentClick already prevents a toggle's own opening click from self-closing, so .stop was unnecessary; removing it lets sibling menus close on outside click as intended. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -69,4 +69,21 @@ describe('ToolbarMenuButton', () => {
|
|||||||
expect(wrapper.find('[data-testid="item-a"]').exists()).toBe(false)
|
expect(wrapper.find('[data-testid="item-a"]').exists()).toBe(false)
|
||||||
wrapper.unmount()
|
wrapper.unmount()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('closes an open menu when another menu button is clicked', async () => {
|
||||||
|
const first = mountMenu({ label: '生成 ▾', toggleTestid: 'generate-menu-toggle' })
|
||||||
|
const second = mountMenu({ label: '导出 ▾', toggleTestid: 'export-menu-toggle' })
|
||||||
|
|
||||||
|
await first.get('button[data-testid="generate-menu-toggle"]').trigger('click')
|
||||||
|
expect(first.find('[data-testid="item-a"]').exists()).toBe(true)
|
||||||
|
|
||||||
|
await second.get('button[data-testid="export-menu-toggle"]').trigger('click')
|
||||||
|
await first.vm.$nextTick()
|
||||||
|
|
||||||
|
expect(second.find('[data-testid="item-a"]').exists()).toBe(true)
|
||||||
|
expect(first.find('[data-testid="item-a"]').exists()).toBe(false)
|
||||||
|
|
||||||
|
first.unmount()
|
||||||
|
second.unmount()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ onUnmounted(() => {
|
|||||||
:data-testid="toggleTestid"
|
:data-testid="toggleTestid"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:aria-expanded="open"
|
:aria-expanded="open"
|
||||||
@click.stop="toggle"
|
@click="toggle"
|
||||||
>
|
>
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user