@focus event is not bubble by default

Michael Shcherbakov 0
Viewed 12

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
vuejs3 events
1 Answers

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>
Markiesch0
Related