From c64954f3015c72aa2952b7f9e519adc46ef3cb16 Mon Sep 17 00:00:00 2001
From: alastair-simon <alastairfraser.work@gmail.com>
Date: Thu, 28 May 2026 15:03:57 +0200
Subject: [PATCH] fix: fix mt-floating-ui transition

---
 .../mt-floating-ui/mt-floating-ui.spec.ts     |  2 +-
 .../mt-floating-ui/mt-floating-ui.vue         | 62 ++++++++-----------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.spec.ts b/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.spec.ts
index bdccd466a..ca28f75d5 100644
--- a/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.spec.ts
+++ b/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.spec.ts
@@ -117,7 +117,7 @@ describe("mt-floating-ui", () => {
 
     expect(document.querySelector("#appWrapper")!.contains(floatingUi)).toBeTruthy(); // won't get teleported, so it's still in the app wrapper
     expect(document.querySelector("#appWrapper")!.contains(floatingUiContent)).toBeFalsy(); // will get teleported to the body, so it's outside the app wrapper
-    expect(floatingUiContent!.parentElement!.tagName).toBe("BODY");
+    expect(document.body.contains(floatingUiContent)).toBe(true);
   });
 
   it("should unmount the floating ui to the document body", async () => {
diff --git a/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.vue b/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.vue
index 8241ba3d7..3c7f1c736 100644
--- a/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.vue
+++ b/packages/component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.vue
@@ -4,31 +4,29 @@
       <slot name="trigger" />
     </div>
     <Teleport to="body">
-      <div
-        v-if="isOpened"
-        ref="floatingUiContent"
-        v-on-click-outside="onClickOutside"
-        class="mt-floating-ui__content"
-        :data-show="isOpened"
-        tabindex="0"
-        :style="contentStyles"
-      >
+      <Transition name="popoverTransition" appear>
         <div
-          v-if="showArrow"
-          ref="floatingUiArrow"
-          class="mt-floating-ui__arrow"
-          data-popper-arrow
-        />
-
-        <transition name="popoverTransition">
-          <template v-if="isOpened">
-            <slot
-              :reference-element-width="referenceElementWidth"
-              :reference-element-height="referenceElementHeight"
-            />
-          </template>
-        </transition>
-      </div>
+          v-if="isOpened"
+          ref="floatingUiContent"
+          v-on-click-outside="onClickOutside"
+          class="mt-floating-ui__content"
+          :data-show="isOpened"
+          tabindex="0"
+          :style="contentStyles"
+        >
+          <div
+            v-if="showArrow"
+            ref="floatingUiArrow"
+            class="mt-floating-ui__arrow"
+            data-popper-arrow
+          />
+
+          <slot
+            :reference-element-width="referenceElementWidth"
+            :reference-element-height="referenceElementHeight"
+          />
+        </div>
+      </Transition>
     </Teleport>
   </div>
 </template>
@@ -272,32 +270,24 @@ onBeforeUnmount(() => {
     transform: rotate(45deg);
   }
 
+  &.mt-floating-ui--top,
   &.mt-floating-ui--top .mt-popover__content {
     transform-origin: top;
   }
 
+  &.mt-floating-ui--right,
   &.mt-floating-ui--right .mt-popover__content {
     transform-origin: right;
   }
 
+  &.mt-floating-ui--bottom,
   &.mt-floating-ui--bottom .mt-popover__content {
     transform-origin: bottom;
   }
 
+  &.mt-floating-ui--left,
   &.mt-floating-ui--left .mt-popover__content {
     transform-origin: left;
   }
 }
-
-.popoverTransition-enter-active,
-.popoverTransition-leave-active {
-  transition:
-    transform 0.15s,
-    opacity 0.15s;
-}
-
-.popoverTransition-enter, .popoverTransition-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  transform: scale3d(1, 0, 1);
-  opacity: 0;
-}
 </style>