From 31949c302a46f264e1fa807e8a48adb6a1041ebd Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Wed, 2 Apr 2025 12:46:26 +0200
Subject: [PATCH] fix(NcPopover): use `transitionend` to wait for popover
 show/hide animation end

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 src/components/NcPopover/NcPopover.vue | 40 ++++++++++++++------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
index 10d62a7ca8..099192fa28 100644
--- a/src/components/NcPopover/NcPopover.vue
+++ b/src/components/NcPopover/NcPopover.vue
@@ -238,7 +238,6 @@ export default {
 	data() {
 		return {
 			internalShown: this.shown,
-			animationDuration: 100,
 		}
 	},
 
@@ -254,7 +253,6 @@ export default {
 
 	mounted() {
 		this.checkTriggerA11y()
-		this.animationDuration = parseInt(getComputedStyle(this.$el).getPropertyValue('--animation-quick')) || 100
 	},
 
 	beforeDestroy() {
@@ -380,33 +378,37 @@ export default {
 		},
 
 		async afterShow() {
+			this.getPopoverContentElement().addEventListener('transitionend', () => {
+				/**
+				 * Triggered after the tooltip was visually displayed.
+				 *
+				 * This is different from the 'show' and 'apply-show' which
+				 * run earlier than this where there is no guarantee that the
+				 * tooltip is already visible and in the DOM.
+				 */
+				this.$emit('after-show')
+			}, { once: true, passive: true })
+
 			this.removeFloatingVueAriaDescribedBy()
 
 			await this.$nextTick()
 			await this.useFocusTrap()
 			this.addEscapeStopPropagation()
-
-			setTimeout(() => {
-			/**
-			 * Triggered after the tooltip was visually displayed.
-			 *
-			 * This is different from the 'show' and 'apply-show' which
-			 * run earlier than this where there is no guarantee that the
-			 * tooltip is already visible and in the DOM.
-			 */
-				this.$emit('after-show')
-			}, this.animationDuration)
 		},
-		async afterHide() {
-			this.clearFocusTrap()
-			this.clearEscapeStopPropagation()
-
-			setTimeout(() => {
+		afterHide() {
+			this.getPopoverContentElement().addEventListener('transitionend', () => {
 				/**
 				 * Triggered after the tooltip was visually hidden.
+				 *
+				 * This is different from the 'hide' and 'apply-hide' which
+				 * run earlier than this where there is no guarantee that the
+				 * tooltip is already visible and in the DOM.
 				 */
 				this.$emit('after-hide')
-			}, this.animationDuration)
+			}, { once: true, passive: true })
+
+			this.clearFocusTrap()
+			this.clearEscapeStopPropagation()
 		},
 	},
 }