Is it possible to trigger on focus of a descendant element?

[thecrypticace]

I've got a custom date picker field that utilizes three separate inputs for day / month / year. I would like a popover containing a calendar to be able to show when any of these have focus.

As it seems right now the popover works only when the root element is focused (and is made focusable by adding tabindex="0"). I know that the focus event does not bubble and attempting to manually bubble the focus event with Element.dispatchEvent sadly does not work.

I tried manually controlling the popover with trigger="manual" + an :open binding however I need to prevent open from becoming false whenever clicking inside the popver or inside of one of the active fields. I can probably get this to work with some amount of effort but it would be nice if the library could help out in some manner to make implementing this behavior less manual.

Any ideas?

Edit: I'm using v3 alpha as the new setup makes things a bit nicer. (Nice work!)

[richardaum]

I know that the focus event does not bubble

You could use focusin which bubbles.

[richardaum]

I've found what's going on:

Inside the $_show internal method, you can see some code inside some of those requestAnimationFrame calls:

// Show the tooltip
requestAnimationFrame(() => {
  if (this.hidden) {
    this.hidden = false
    this.$_hide()
    return;
  }

  if (!this.$_isDisposed) {
    this.isOpen = true // <<<<<<<<<<<< 
  } else {
    this.dispose()
  }
});

You can see there is a statement finally changing the value from isOpen to true, which happens when requestAnimationFrame is called. Notice it is inside another requestAnimationFrame.

Anyway, this change is happening in a async way so the parent component doesn't know when the popover is actually open.

Possible solutions:

1. Emit an event right after that change. You could use apply-show or another event. Then listen to this event anywhere else in your component and focus some element inside the popover.

// Show the tooltip
requestAnimationFrame(() => {
  if (this.hidden) {
    this.hidden = false
    this.$_hide()
    return
  }

  if (!this.$_isDisposed) {
    this.isOpen = true
    this.$emit("apply-show") // <<<<<<<<<<<<<<<<<
  } else {
    this.dispose()
  }
})

2. For a temporary solution, you could access the internal reference, using ref and then watch that variable, when its value is true you could safely focus on a element inside the popover.

<template>
  <v-popover ... ref="popover">
    <div>Click me</div>
    <template #popover>
      <input ref="input" />
    </template>
  </v-popover>
</template>

<script>
export default {
    mounted() {
      this.$watch(
        () => this.$refs.popover.isOpen,
        async isOpen => {
          if (isOpen) {
            await this.$nextTick()
            const input = this.$refs.input
            input.focus()
          }
        },
      );
    }
  },
}
</script>

[thecrypticace]

Ha I forgot about this issue. I found some way to work around what I was doing (it may have been focusin I don't recall). Good investigation work. I'll keep this around for a while as I'll likely be coming back to this in the next few weeks oddly enough.