Vuetify: Text Fields with autofocus don't consistently work in dialog

[JacksMyth]

Steps to reproduce

Open the Dialog, note the text-field is not focused sometimes.
If it was focused, close the dialog, open the dialog again, notice it is now not focussed.

Versions

Latest

What is expected ?

I expect it to be autofocuses on render, i.e. every time the dialog opens

What is actually happening ?

It usually works the first time the dialog opens (at least in my application), but in the code pen doesn't seem to work even for the first time.

Reproduction Link

https://codepen.io/anon/pen/JroVzr?editors=1111

[smares]

The dialog is rendered the first time it's opened if lazy-loaded or when the instance is mounted if not lazy-loaded. The autofocus is simply an HTML property. If you open the dialog a second time, it was already rendered and the browser already focused the textfield inside it once.

[JacksMyth]

Thanks for the response! Is there anyway to have it work each time the
dialog opens? Perhaps destroying and recreating the modal content on the
Dom?

On Thu, Sep 14, 2017, 19:08 Sebastian Mares [e-mail]
wrote:

The dialog is rendered the first time it's opened if lazy-loaded or when
the instance is mounted if not lazy-loaded. The autofocus is simply an HTML
property. If you open the dialog a second time, it was already rendered and
the browser already focused the textfield inside it once.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/1731#issuecomment-329547559,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJvsw6ETjSdbnVO6kV8MfGe3fGAIY_7Zks5siV1_gaJpZM4PXz-a
.

[smares]

The way I do it is simply call focus() myself. I am not at the PC right now, but IIRC you need to set a ref property to your textfield and you can access it programatically using this.$refs.yourrefname.focus().

[nekosaur]

Another options is to put a v-if on the text field that uses the same variable as the dialog v-model. that way it should be recreated every time dialog is opened.

[flybayer]

@JacksMyth issue #1353 has a solution I'm using

[JacksMyth]

Thanks everyone for the responses. Both the v-if and this.$refs.focus.focus(); options did work really well. I'm going with the .focus() since it'll save recreating the component every time. Appreciate the help all

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord