Vuejs Typescript class component refs.focus not working

Question

I am using Typescript Class component and I have this problem I can't use this.$refs.<refname>.focus()

Template Code:

 <header class="py-2 px-1 m-0 row">
    <input
      type="text"
      class="form-control m-1"
      ref="searchBoard"
      placeholder="Find boards by name..."
    />
  </header>

This input field is inside a popup.

Typescript Code:

import { Component, Vue } from "vue-property-decorator";

@Component
export default class BoardList extends Vue {

  // I added this to solve the compile error
  $refs!: {
    searchBoard: HTMLInputElement;
  };

  isShown = false;

  toggleDropdown() {
    this.isShown = !this.isShown;
    this.$refs.searchBoard.focus();
  }
}

Then I get this Error:

this problem is fixed in this question Vuejs typescript this.$refs..value does not exist added:

  $refs!: {
    searchBoard: HTMLInputElement;
  };

I get a New Error in my console

[Vue warn]: Error in v-on handler: "TypeError: this.$refs.searchBoard is undefined"

found in

---> <BoardList> at src/components/boards/buttons/BoardList.vue
       <NavbarTop> at src/components/NavbarTop.vue
         <ComponentName> at src/App.vue
           <Root> vue.runtime.esm.js:619
    VueJS

7

is there a way to do this?

The HTMLFormElement does not have a focus method. It should be typed as HTMLInputElement instead. — Terry
– Terry, Commented Feb 11, 2020 at 17:30
yes I updated it with HTMLInputElement, but I still get the error in console. > "TypeError: this.$refs.searchBoard is undefined" — Evan
– Evan, Commented Feb 11, 2020 at 17:33
Refs are non-reactive. Are you sure that the element is not conditionally rendered (e.g. found within an element with a v-if directive), and that it is definitely available when the method toggleDropdown is invoked? What happens if you log this.$refs to the console? — Terry
– Terry, Commented Feb 11, 2020 at 18:00
when I console its now showing the elements and its attributes. but the focus() is not working — Evan
– Evan, Commented Feb 11, 2020 at 18:30
its working now I added the .focus() inside a setTimeout(). it's wierd — Evan
– Evan, Commented Feb 11, 2020 at 18:35

tony19 · Accepted Answer · 2022-07-15 20:51:26Z

8

Regarding the use of setTimeout:

Based on the timing of your code, it seems your isShown property controls whether or not the $refs.searchBoard is rendered in the DOM. Instead of setTimeout, Vue recommends using $nextTick to defer an action until the next DOM cycle:

toggleDropdown() {
  this.isShown = !this.isShown
  this.$nextTick(() => this.$refs.searchBoard.focus())
}

Regarding $refs:

A slightly cleaner alternative to the $refs type extension in your class is to use @Ref:

@Component
export default class BoardList extends Vue {
  @Ref() readonly searchBoard!: HTMLInputElement

  toggleDropdown() {
    this.isShown = !this.isShown
    this.$nextTick(() => this.searchBoard.focus())
  }
}

edited Jul 15, 2022 at 20:51

answered Feb 11, 2020 at 21:02

tony19

140k24 gold badges281 silver badges354 bronze badges

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

2 Comments

Evan Over a year ago

Thank you, this looks good but @Ref is giving VSCode error "'Ref' is not defined."

tony19 Over a year ago

Import it beforehand: import { Ref } from 'vue-property-decorator'

Evan · Accepted Answer · 2020-02-11 18:49:52Z

1

I was able to make it work, I added .focus() inside setTimeout().

  toggleDropdown() {
    this.isShown = !this.isShown;

    setTimeout(() => {
      this.$refs.searchBoard.focus();
    }, 50);
  }

answered Feb 11, 2020 at 18:49

Evan

2,5277 gold badges40 silver badges72 bronze badges

3 Comments

homerThinking Over a year ago

I've tried this and still returns error "Uncaught TypeError: _this2.$refs.specie.focus is not a function at eval"

Nick Over a year ago

This works for me in my inertia vue3 project. But it feels wrong. My console log in my onMount is undefined. Can anyone explain why we have to do a timeout?

Evan Over a year ago

@Nick The this.isShown if truthy will renders a new element on the DOM; we use setTimeout() to delay 'focus()' until the element has rendered on the DOM. I do advise using $nextTick() instead.

Dilan · Accepted Answer · 2021-04-20 13:36:54Z

1

try this

toggleDropdown() {
    this.isShown = !this.isShown;
    this.$refs.searchBoard.$el.focus();
}

edited Apr 20, 2021 at 13:36

Dilan

2,7198 gold badges28 silver badges42 bronze badges

answered Apr 20, 2021 at 7:43

Mukhammad-Umar

615 bronze badges

1 Comment

cmprogram Over a year ago

Please elaborate on the answer, so that OP understands WHY you think your solution is correct.

Collectives™ on Stack Overflow

Vuejs Typescript class component refs.focus not working

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related