From 9f6e0571ff82a16552117378d33f600ed347e887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20B=C3=A9ger?= <pascal.beger@gmail.com>
Date: Mon, 31 Aug 2026 12:13:52 +0200
Subject: [PATCH] refactor(2389): AvDrawer  - add Teleport to body

---
 .../overlay/drawers/AvDrawer/AvDrawer.test.ts |  1 +
 .../overlay/drawers/AvDrawer/AvDrawer.vue     | 54 ++++++++++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/overlay/drawers/AvDrawer/AvDrawer.test.ts b/src/components/overlay/drawers/AvDrawer/AvDrawer.test.ts
index 2736a8351..fc6c6a865 100644
--- a/src/components/overlay/drawers/AvDrawer/AvDrawer.test.ts
+++ b/src/components/overlay/drawers/AvDrawer/AvDrawer.test.ts
@@ -18,6 +18,7 @@ BddTest().given('a drawer component', () => {
   let wrapper: ReturnType<typeof mount<typeof AvDrawer>>
 
   const stubs = {
+    Teleport: true,
     FocusTrap: {
       name: 'FocusTrap',
       emits: ['deactivate'],
diff --git a/src/components/overlay/drawers/AvDrawer/AvDrawer.vue b/src/components/overlay/drawers/AvDrawer/AvDrawer.vue
index a2111f625..c322f462f 100644
--- a/src/components/overlay/drawers/AvDrawer/AvDrawer.vue
+++ b/src/components/overlay/drawers/AvDrawer/AvDrawer.vue
@@ -78,36 +78,38 @@ watch(show, (newValue) => {
 </script>
 
 <template>
-  <div v-if="show">
-    <div
-      v-if="backdrop"
-      class="av-drawer-backdrop"
-    />
-    <FocusTrap
-      @deactivate="emit('escapePressed')"
-    >
+  <Teleport to="body">
+    <div v-if="show">
       <div
-        ref="drawerRef"
-        class="av-drawer av-col"
-        :class="`av-drawer--${position}`"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="ariaLabel"
+        v-if="backdrop"
+        class="av-drawer-backdrop"
+      />
+      <FocusTrap
+        @deactivate="emit('escapePressed')"
       >
-        <div class="av-drawer__content-wrapper av-col">
-          <div class="av-drawer__content">
-            <slot />
-          </div>
-          <div
-            v-if="slots.footer"
-            class="footer-container av-p-md"
-          >
-            <slot name="footer" />
+        <div
+          ref="drawerRef"
+          class="av-drawer av-col"
+          :class="`av-drawer--${position}`"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="ariaLabel"
+        >
+          <div class="av-drawer__content-wrapper av-col">
+            <div class="av-drawer__content">
+              <slot />
+            </div>
+            <div
+              v-if="slots.footer"
+              class="footer-container av-p-md"
+            >
+              <slot name="footer" />
+            </div>
           </div>
         </div>
-      </div>
-    </FocusTrap>
-  </div>
+      </FocusTrap>
+    </div>
+  </Teleport>
 </template>
 
 <style lang="scss" scoped>