How to set initial focus on input field on page load (with VueJS 3 using Composition API)

Question

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?

rits · Accepted Answer · 2021-03-30 10:43:57Z

21

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
  };
}

answered Mar 30, 2021 at 10:43

rits

1,5547 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eugene Over a year ago

Hero!! Thanks a lot. Didn't know the nextTick() function.

serii Over a year ago

This code is for vue2, not vue3 composition api?

Erik Martín Jordán · Accepted Answer · 2021-07-15 09:46:11Z

8

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

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

edited Jul 15, 2021 at 9:46

answered Jul 15, 2021 at 9:21

Erik Martín Jordán

4,8934 gold badges34 silver badges42 bronze badges

2 Comments

Patrick Quijano Over a year ago

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.

Erik Martín Jordán Over a year ago

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.

Collectives™ on Stack Overflow

How to set initial focus on input field on page load (with VueJS 3 using Composition API)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related