Vuejs, I need to reset page focus on route change

Question

In a SPA,, specifically Vuejs, I need to reset the tab index of the page when I access a new route

I tried this:

watch: {
    $route (to, from) {
        document.getElementById('content').focus()
        // or
        // document.body.focus()
        // or
        // window.focus()
    }
}

I tried placing the same code to:

beforeRouteEnter (to, from, next) {
    next(vm => vm.resetFocus())
},
methods: {
    resetFocus() {
        document.getElementById('content').focus()
        // or
        // document.body.focus()
        // or
        // window.focus()
    }
}

I AM ABLE to set focus on a ref="focus" in my main template but this gets the element displayed and it is not an ideal scenario. I need window or body to be focused as it is when the page loads.

Component template:

<template>
    <div id="app">
    <a class="sr-only sr-only-focusable skip-link" ref="focus" href="#content">Go to main content</a>
    <navigation><navigation/>
    <main id="content">
        <router-view></router-view>
    </main> 
    </div>
</template>

In my component code:

    methods: {
        setFocus(){
            this.$refs.focus.focus()
        }
    },
    watch:{
        $route (to, from){
            this.setFocus()
        }
    },

Neither attempts give me any results..

Are you sure the watcher is firing? Have you tried an immediate watcher? — Frondor, Mar 27 '18 at 14:53
It's firing. I am sure. this.setFocus() from a watcher DOES set focus on the ref element but it won't set focus to window. — GRowing, Mar 27 '18 at 14:57
Well,, the problem is that the window is already in focus,,, silly me,, but I need it to be in the state of focus as it is on load — GRowing, Mar 27 '18 at 15:06
I wrote a thing to solve this (and related issues): https://github.com/oaf-project/oaf-vue-router — danielnixon, May 07 '19 at 01:20
See my answer at https://stackoverflow.com/a/56087925/2476884 — danielnixon, May 12 '19 at 00:10

score 1 · Answer 1 · answered Sep 27 '22 at 13:21

I solved this issue in Vue 3 with a composable:

/**
 * Reset the keyboard focus to the body tag on page changes.
 */
export const useRouterFocusReset = () => {
  onMounted(() => {
    const router = useRouter()
    router.afterEach((from, to) => {
      if(from.path !== to.path) {
        nextTick(() => {
          document.body.tabIndex = 0
          document.body.focus()
          document.body.tabIndex = -1
        })
      }
    })
  })
}

Then call it inside your main app component.

Slightly modifying this worked for me on Vue 2 also, thanks! — cmf, Jan 11 '23 at 22:27

Vuejs, I need to reset page focus on route change

1 Answers1