@focus event is not bubble by default

September 24, 2022

Vue version:
3.2.39

While click on the button, the focus does not bubble to the wrapper, and that is why it does not show the "wrapper focus". How to fix this?

<template>
  <div tabindex="-1" @focus="onWrapperFocus" @blur="onWrapperBlur">
    <button @focus="onInnerFocus" @blur="onInnerBlur">Hello</button>
  </div>
</template>

<script >
export default {
  setup() {
    return {
      onWrapperFocus() {
        console.log("wrapper focus");
      },

      onWrapperBlur() {
        console.log("wrapper blur");
      },

      onInnerFocus() {
        console.log("inner focus");
      },

      onInnerBlur() {
        console.log("inner blur");
      },
    };
  },
};
</script>

Expected behavior:

inner focus 
wrapper focus

>Solution :

There is another phase of event called "capturing". It is rarely used in real code, but can be usefull in this case.

You can add the capturing phase by adding .capture after the event name like shown below:

<div tabindex="-1" @focus.capture="onWrapperFocus" @blur.capture="onWrapperBlur">
  <button @focus="onInnerFocus" @blur="onInnerBlur">Hello</button>
</div>