9

How can I set the focus on an HTML input field upon page loading while using the Composition API of VueJS 3? I have the following HTML:

<div>
  <input type="text" id="filter" v-model="filter">
</div>

And have tried this in the setup() function, but that doesn't set the focus:

setup() {
  onMounted(() => {
    const filter_fld = document.getElementById('filter')
    filter_fld.focus()
  })
}

I also tried using the below.
HTML:

<div>
  <input type="text" ref="filter_fld" v-model="filter">
</div>

And in setup() function:

setup() {
  const filter_fld = ref(null)

  onMounted(() => {
    filter_fld.value?.focus()
  })
}

But also to no success unfortunately. Any suggestions?

Eugene
  • 173
  • 1
  • 10

2 Answers2

18

Have an input with a ref in your template e.g.:

<input ref="filter" />

Then after component is mounted focus it by reference on next tick:

import { ref, onMounted, nextTick } from 'vue';

setup() {
  const filter = ref(null);

  onMounted(() => {
    nextTick(() => {
      filter.value.focus();
    });
  });

  return {
    filter
  };
}
rits
  • 1,474
  • 7
  • 29
  • 49
2

You can also use the autofocus native's HTML attribute:

<input type = "text" id = "filter" v-model = "filter" autofocus/>
Erik Martín Jordán
  • 4,332
  • 3
  • 26
  • 36
  • This only works when the page was loaded the first time. On the next succeeding loads, this will not work. This is Vue. Not native HTML. – Patrick Mar 27 '22 at 04:14
  • It will work for a single web app with a single route. If your site has multiple routes, you might need to focus the form using the nextTick() function on a reload. Vue is a JS framework, it literally controls native HTML. – Erik Martín Jordán Mar 27 '22 at 08:56