Fix actions dropdown focus timing

Because "@after-show" is still happening too early due to v-tooltip's
use of "requestAnimationFrame" we can't rely on its events to tell us
when the popover is actually visible.

This workaround introduces an additional Popover event "after-show" and
"after-hide" that are based on monitoring the inner "isOpen" property
which is the one toggling the CSS visibility.

The Actions popover logic now uses "after-show" to reliably apply the
focus on the first action element.

Signed-off-by: Vincent Petry <[email protected]>

src/components/Actions/Actions.vue

@@ -171,7 +171,7 @@ export default {
 			:boundaries-element="boundariesElement"
 			:container="container"
 			@show="openMenu"
-			@apply-show="onOpen"
+			@after-show="onOpen"
 			@hide="closeMenu">
 			<!-- Menu open/close trigger button -->
 			<button slot="trigger"
@@ -502,8 +502,6 @@ export default {
 			 * Event emitted when the popover menu is closed
 			 */
 			this.$emit('open')
-
-			this.onOpen(e)
 		},
 		closeMenu(e) {
 			if (!this.opened) {

src/components/Popover/Popover.vue

@@ -52,6 +52,7 @@ With a `<button>` as a trigger:
 <template>
 	<VPopover
 		v-bind="$attrs"
+		ref="popover"
 		popover-base-class="popover"
 		popover-wrapper-class="popover__wrapper"
 		popover-arrow-class="popover__arrow"
@@ -74,6 +75,24 @@ export default {
 	components: {
 		VPopover,
 	},
+
+	mounted() {
+		this.$watch(
+			() => {
+				// required because v-tooltip doesn't provide events
+				// and @show is too early
+				// see https://github.com/Akryum/v-tooltip/issues/661
+				return this.$refs.popover.isOpen
+			},
+		  (val) => {
+			  if (val) {
+				  this.$emit('after-show')
+			  } else {
+				  this.$emit('after-hide')
+			  }
+		  }
+		)
+	},
 }
 </script>