From f44380332725f8290fe83061e8d3748d082db72d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 21 May 2026 16:35:46 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20fermeture=20du=20MalioDrawer=20avec?=
 =?UTF-8?q?=20la=20touche=20=C3=89chap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/malio/drawer/Drawer.test.ts | 13 +++++++++++++
 app/components/malio/drawer/Drawer.vue     |  8 ++++++++
 2 files changed, 21 insertions(+)

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"
         >
           <div
             v-if="hasHeader || showClose"
@@ -142,6 +143,13 @@ function onBackdropClick() {
   if (props.dismissable) close()
 }
 
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.closeOnEscape) {
+    e.stopPropagation()
+    close()
+  }
+}
+
 function close() {
   if (!isControlled.value) localValue.value = false
   emit('update:modelValue', false)