ROUTERLINK does not support Focus event

Question

This is a snippet of my code from a Vue.js application

    <li v-for="(category, index) in data.categories" :key="index" class="category">
        <RouterLink
            :to="{ path: category.url }"
            :style="{
                color: category['Category Colour'].value,
                borderColor: category['Category Colour'].value,
            }"
            :class="{ current: category.currentCategory }"
            class="link"
            @focus="menuItemFocus(true)"
            @blur="menuItemFocus(false)"
        >
            <ScText :field="category['Category Name']" />
        </RouterLink>
    </li>

However the menuItemFocus method does not get called.

I tried with v-on:focus instead but the result is the same.

I tried replacing with an alert and it never appears. @focus="alert('Focus, young padawan!')"

So I guess Routerlink doesn't support focus events.

I'm thinking that I may need to code my own component, but is there a better alternative?

Answer 1

I needed to use focus.native. It works now!

<li v-for="(category, index) in data.categories" :key="index" class="category">
    <RouterLink
        :to="{ path: category.url }"
        :style="{
            color: category['Category Colour'].value,
            borderColor: category['Category Colour'].value,
        }"
        :class="{ current: category.currentCategory }"
        class="link"
        @focus.native="menuItemFocus(true)"
        @blur.native="menuItemFocus(false)"
    >
        <ScText :field="category['Category Name']" />
    </RouterLink>
</li>