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 <vincent@nextcloud.com>

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

@@ -51,6 +51,7 @@ With a `<button>` as a trigger:
 
 <template>
  <VPopover
+ ref="popover"
  v-bind="$attrs"
  popover-base-class="popover"
  popover-wrapper-class="popover__wrapper"
@@ -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>