diff --git a/app/components/malio/drawer/Drawer.test.ts b/app/components/malio/drawer/Drawer.test.ts index 29874ab..ec7ca62 100644 --- a/app/components/malio/drawer/Drawer.test.ts +++ b/app/components/malio/drawer/Drawer.test.ts @@ -201,4 +201,17 @@ describe('MalioDrawer', () => { const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' }) expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70') }) + + it('closes on Escape key when closeOnEscape is true', async () => { + const wrapper = mountComponent({ modelValue: true }) + await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' }) + expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]) + expect(wrapper.emitted('close')).toHaveLength(1) + }) + + it('does not close on Escape when closeOnEscape is false', async () => { + const wrapper = mountComponent({ modelValue: true, closeOnEscape: false }) + await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' }) + expect(wrapper.emitted('update:modelValue')).toBeUndefined() + }) }) diff --git a/app/components/malio/drawer/Drawer.vue b/app/components/malio/drawer/Drawer.vue index c2aca8f..dbf37c2 100644 --- a/app/components/malio/drawer/Drawer.vue +++ b/app/components/malio/drawer/Drawer.vue @@ -30,6 +30,7 @@ :aria-label="hasHeader ? undefined : (ariaLabel || undefined)" tabindex="-1" data-test="panel" + @keydown="onKeydown" >