feat(NcActions): add opened and closed events to handle closing/opening end | fix(NcPopover): correctly wait for animation end in after-show/after-hide events

src/components/NcActionButton/NcActionButton.vue

@@ -384,11 +384,6 @@ export default {
 		ChevronRightIcon,
 		ChevronLeftIcon,
 	},
-	setup() {
-		return {
-			isRtl,
-		}
-	},
 	mixins: [ActionTextMixin],
 
 	inject: {
@@ -462,6 +457,11 @@ export default {
 			default: null,
 		},
 	},
+	setup() {
+		return {
+			isRtl,
+		}
+	},
 
 	computed: {
 		/**

src/components/NcActions/NcActions.vue

@@ -1179,12 +1179,15 @@
 	},
 
 	emits: [
+		'click',
+		'blur',
+		'focus',
+
+		'close',
+		'closed',
 		'open',
+		'opened',
 		'update:open',
-		'close',
-		'focus',
-		'blur',
-		'click',
 	],
 
 	setup(props) {
@@ -1471,10 +1474,17 @@
 		/**
 		 * Called when popover is shown after the show delay
 		 */
-		onOpen() {
+		onOpened() {
 			this.$nextTick(() => {
 				this.focusFirstAction(null)
 				this.resizePopover()
+
+				/**
+				 * Event emitted when the popover menu is opened.
+				 *
+				 * This event is emitted after `update:open` was emitted and the opening transition finished.
+				 */
+				this.$emit('opened')
 			})
 		},
 
@@ -1516,7 +1526,7 @@
 			return this.$refs.menu.querySelector('li.active')
 		},
 		/**
 		 * @return {NodeListOf<HTMLElement>}
 		 */
 		getFocusableMenuItemElements() {
 			return this.$refs.menu.querySelectorAll(focusableSelector)
@@ -1901,9 +1911,9 @@
 					},
 					on: {
 						show: this.openMenu,
-						'apply-show': this.onOpen,
+						'after-show': this.onOpened,
 						hide: this.closeMenu,
-						'apply-hide': this.onClosed,
+						'after-hide': this.onClosed,
 					},
 				},
 				[

src/components/NcAppNavigationNew/NcAppNavigationNew.vue

@@ -84,7 +84,7 @@ export default {
 			validator(value) {
 				return ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1
 			},
-		}
+		},
 	},
 
 	emits: ['click'],

src/components/NcAvatar/NcAvatar.vue

@@ -153,8 +153,8 @@ export default {
 </docs>
 <template>
 	<span ref="main"
-		:title="tooltip"
 		v-click-outside="closeMenu"
+		:title="tooltip"
 		:class="{
 			'avatardiv--unknown': userDoesNotExist,
 			'avatardiv--with-menu': hasMenu,

src/components/NcPopover/NcPopover.vue

@@ -174,7 +174,6 @@ import NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'
  * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse
  * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus
  */
-
 export default {
 	name: 'NcPopover',
 
@@ -239,6 +238,7 @@ export default {
 	data() {
 		return {
 			internalShown: this.shown,
+			animationDuration: 100,
 		}
 	},
 
@@ -254,6 +254,7 @@ export default {
 
 	mounted() {
 		this.checkTriggerA11y()
+		this.animationDuration = parseInt(getComputedStyle(this.$el).getPropertyValue('--animation-quick')) || 100
 	},
 
 	beforeDestroy() {
@@ -385,22 +386,27 @@ export default {
 			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.$emit('after-show')
+			}, this.animationDuration)
 		},
-		afterHide() {
+		async afterHide() {
 			this.clearFocusTrap()
 			this.clearEscapeStopPropagation()
-			/**
-			 * Triggered after the tooltip was visually hidden.
-			 */
-			this.$emit('after-hide')
+
+			setTimeout(() => {
+				/**
+				 * Triggered after the tooltip was visually hidden.
+				 */
+				this.$emit('after-hide')
+			}, this.animationDuration)
 		},
 	},
 }