Quasar: field focus?

[kswope]

Auto-focusing fields seems missing or undocumented.

I simply want to focus a q-search field when the page loads. I don't think anything like an autofocus attribute or a ref will work because this is a field wrapped in a module.

Good new is the search field for the website autofocuses nicely :)

[rstoenescu]

This is implemented in future v0.14. Not yet available. Will see if I can port to current v0.13 architecture to go with v0.13.2

[kswope]

Good news!

Here's a terrible temporary solution if anybody is interested, ( probably not for production )

<template>
  <div>
    <q-search></q-search>
  </div>
</template>

<script>

export default {
  data: function() {
    return {}
  },
  mounted: function() {
    document.getElementsByClassName('q-search-input')[0].focus()
  }
}

[LuizLeite]

Hi.

I'm using
this.$refs.xxx.focus(),
where xxx is a field named by ref property at q-input.

[syc-pad]

But how do you do the same thing in a Dialog with form components ?
On your website, http://quasar-framework.org/components/dialog.html, when you click on the "Textfields" example, autofocus is working, on the first field.
But in real life, I can't make it work, and I don't understand how they manage to do this.

[mstaack]

qinput allows focus property:
https://github.com/quasarframework/quasar/blob/dev/src/components/input/QInput.vue#L19

give it a try...

[syc-pad]

Thank you @mstaack, but I don't understand how I could implement a qinput inside a dialog.

Here is a sample Dialog :
Dialog.create({
title: 'Prompt',
message: 'Modern HTML5 Single Page Application front-end framework on steroids.',
form: {
name: {
type: 'text',
label: 'Textbox',
model: ''
},
age: {
type: 'number',
label: 'Numeric',
model: 10,
min: 5,
max: 90
},
tags: {
type: 'chips',
label: 'Chips',
model: ['Joe', 'John']
},
comments: {
type: 'textarea',
label: 'Textarea',
model: ''
}
},
buttons: [
'Cancel',
{
label: 'Ok',
handler (data) {
Toast.create('Returned ' + JSON.stringify(data))
}
}
]
})

I tried to set some things like : type: 'qinput' (or q-input, or anything) after having imported QInput in my declarations, with import { QInput } from 'quasar'but it doesn't work.

[Astemir-A]

var inp = document.querySelectorAll('input#user-name').item(0).focus()

[VSG24]

Why is this not addressed yet?

[rstoenescu]

@VSG24
Why do you say it isn't addressed? The autofocus has been addressed and the Dialog plugin can be used with custom components too...

[rstoenescu]

@syc-pad Use the Dialog plugin with a custom component.

[VSG24]

@VSG24
Why do you say it isn't addressed? The autofocus has been addressed and the Dialog plugin can be used with custom components too...

The .focus() method of QInput doesn't work .