I can't focus my q-input...

Raph

Hello,

Sorry about my english, I’m french…

I try to set focus on my q-input but nothing happens… Could you help me please ?

<q-input outlined class="col" type="text" v-model="student" ref="studentName" placeholder="Nom de l'élève" style="margin-right : 20px">
    <template v-slot:prepend>
       <q-icon name="person" />
    </template>
</q-input>

...

testFocus () {
  console.log(this.$refs.studentName);
  this.$refs.studentName.focus();
}

The console log if it can help ??? :

Index.vue?b484:499 VueComponent {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$attrs: (...)$children: [VueComponent]0: VueComponent {_uid: 451, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}length: 1__proto__: Array(0)$createElement: ƒ (a, b, c, d)$el: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined$listeners: (...)$options: {parent: VueComponent, _parentVnode: VNode, propsData: {…}, _parentListeners: {…}, _renderChildren: undefined, …}$parent: VueComponent {_uid: 421, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$refs: {input: input.q-field__native.q-placeholder, control: div.q-field__control.relative-position.row.no-wrap}$root: Vue {_uid: 11, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$scopedSlots: {prepend: ƒ, $stable: true, $key: undefined, $hasNormal: false}$slots: {}$vnode: VNode {tag: "vue-component-41-QInput", data: {…}, children: undefined, text: undefined, elm: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined, …}autofocus: (...)autogrow: (...)bgColor: (...)blur: ƒ ()borderless: (...)bottomSlots: (...)classes: (...)clearIcon: (...)clearable: (...)color: (...)computedCounter: (...)computedErrorMessage: (...)computedUnmask: undefinedcontentClass: (...)controlEvents: {focus: ƒ, focusin: ƒ, focusout: ƒ, popup-show: ƒ, popup-hide: ƒ}counter: (...)dark: (...)debounce: (...)dense: (...)disable: (...)editable: (...)error: (...)errorMessage: (...)fieldClass: (...)fillMask: (...)filled: (...)floatingLabel: (...)focus: ƒ ()focused: (...)focusoutTimer: 126hasError: (...)hasMask: falsehasValue: (...)hideBottomSpace: (...)hideHint: (...)hint: (...)innerError: (...)innerErrorMessage: (...)innerLoading: (...)innerValue: (...)inputClass: (...)inputStyle: (...)isDirty: (...)isTextarea: (...)itemAligned: (...)label: (...)lazyRules: (...)loading: (...)mask: (...)maskMarked: ""maskReplaced: ""maxValues: (...)maxlength: (...)noErrorIcon: (...)outlined: (...)prefix: (...)readonly: (...)resetValidation: ƒ ()reverseFillMask: (...)rounded: (...)rules: (...)select: ƒ ()shouldRenderBottom: (...)square: (...)stackLabel: (...)standout: (...)styleType: (...)suffix: (...)type: (...)unmaskedValue: (...)validate: ƒ ()validateIndex: 0value: (...)__adjustHeight: ƒ ()__adjustHeightDebounce: ƒ debounced()__clearValue: ƒ ()__emitValue: ƒ ()__fillWithMask: ƒ ()__focus: ƒ ()__getBottom: ƒ ()__getContent: ƒ ()__getControl: ƒ ()__getControlContainer: ƒ ()__getInitialMaskedValue: ƒ ()__getInnerAppendNode: ƒ ()__getPaddedMaskMarked: ƒ ()__mask: ƒ ()__maskReverse: ƒ ()__moveCursorLeft: ƒ ()__moveCursorLeftReverse: ƒ ()__moveCursorRight: ƒ ()__moveCursorRightReverse: ƒ ()__onChange: ƒ ()__onCompositionEnd: ƒ ()__onCompositionStart: ƒ ()__onCompositionUpdate: ƒ ()__onControlFocusin: ƒ ()__onControlFocusout: ƒ ()__onControlPopupHide: ƒ ()__onControlPopupShow: ƒ ()__onInput: ƒ ()__onMaskedKeydown: ƒ ()__triggerValidation: ƒ ()__unmask: ƒ ()__updateMaskInternals: ƒ ()__updateMaskValue: ƒ ()_c: ƒ (a, b, c, d)_computedWatchers: {hasError: Watcher, computedErrorMessage: Watcher, editable: Watcher, hasValue: Watcher, computedCounter: Watcher, …}_data: {…}_directInactive: false_events: {input: Array(1)}_hasHookEvent: false_inactive: null_isBeingDestroyed: false_isDestroyed: false_isMounted: true_isVue: true_props: {…}_renderProxy: Proxy {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_routerRoot: Vue {_uid: 11, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}_self: VueComponent {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_staticTrees: null_uid: 450_vnode: VNode {tag: "div", data: {…}, children: Array(1), text: undefined, elm: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined, …}_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}_watchers: (22) [Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher]$data: (...)$isServer: (...)$props: (...)$route: (...)$router: (...)$ssrContext: (...)get $attrs: ƒ reactiveGetter()set $attrs: ƒ reactiveSetter(newVal)get $listeners: ƒ reactiveGetter()set $listeners: ƒ reactiveSetter(newVal)get focused: ƒ proxyGetter()set focused: ƒ proxySetter(val)get innerError: ƒ proxyGetter()set innerError: ƒ proxySetter(val)get innerErrorMessage: ƒ proxyGetter()set innerErrorMessage: ƒ proxySetter(val)get innerLoading: ƒ proxyGetter()set innerLoading: ƒ proxySetter(val)get innerValue: ƒ proxyGetter()set innerValue: ƒ proxySetter(val)get isDirty: ƒ proxyGetter()set isDirty: ƒ proxySetter(val)__proto__: Vue

Thanks a lot for your help

Raph

I found a way to make it work by testing… but it is really weird ???

this.$refs.studentName.focus();

doesn’t work…

But if I write 2 times…

this.$refs.studentName.focus();
this.$refs.studentName.focus();

It works ???

Can someone explain me how is it possible ???

Thanks again.

EDIT : Damned, if I launch it from an other button (from a Q-dialog)… It doesn’t work anymore !

<q-input outlined class="col" type="text" v-model="student" ref="studentName" placeholder="Nom de l'élève" style="margin-right : 20px">
    <template v-slot:prepend>
       <q-icon name="person" />
    </template>
</q-input>


<q-btn-group class="col">
    <q-btn color="primary" @click="confirmTestFocus = true" label="Charger les copies" icon="refresh" class="col" />
    <q-btn-dropdown outline auto-close color="primary" icon="menu">
        <!-- dropdown content goes here -->
        <q-list padding style="width: 250px">
            <q-item clickable @click="testFocusSUCCESS">
                <q-item-section avatar>
                    <q-avatar icon="folder" color="primary" text-color="white" />
                </q-item-section>
                <q-item-section>
                    <q-item-label>Ouvrir le dossier temporaire</q-item-label>
                </q-item-section>
            </q-item>
            <q-separator inset />
        </q-list>
    </q-btn-dropdown>
</q-btn-group>

<q-dialog v-model="confirmTestFocus" persistent>
    <q-card>
        <q-card-section class="row items-center">
            <q-avatar icon="refresh" color="primary" text-color="white" />
            <span class="q-ml-sm">Attention, toutes les associations actuelles seront supprimées !</span>
        </q-card-section>
        <q-card-actions align="right">
            <q-btn flat label="Annuler" color="primary" v-close-popup />
            <q-btn @click="testFocusFAIL" label="Charger les copies" color="primary" v-close-popup />
        </q-card-actions>
    </q-card>
</q-dialog>


testFocusSUCCESS () {
    this.$refs.studentName.focus();  
    this.$refs.studentName.focus();
}

testFocusFAIL () {
    this.$refs.studentName.focus();  
    this.$refs.studentName.focus();
}

I really don’t understand… ?

danbars

I have the same issue. In my case I tried to set focus immediately after the QInput was created with v-for.
I tried setting focus inside this.$nextTick but it didn’t work. The focus was set and immediately blurred.
I was able to make it work by setting the focus inside setTimeout:

AddItemToArray(item) //this adds an item which creates another qinput that is behind v-for
const _this = this
let fields = _this.$refs.myinput
setTimeout(() => {
  fields[fields.length - 1].focus()
}, 500)

dnix

@danbars your solution worked for me, even without a timeout value. Just in case that’s fluky, I did:

            const vm = this

            setTimeout(() => {
                vm.$refs.nameOfMyRef.focus() 
            }, 20)

note: Using nextTick did not work for me, either.

metalsadman

@Raph @dnix try it with $el. Ie this.$refs.someref.$el.focus().

OTTOTS

Did anyone get a fix for this? I am still encountering this issue

OTTOTS

 mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.elementReference.$el.focus()
      }, 20)
    })
  }

This hack works but does anyone have a more elegant solution?

qyloxe

This hack works but does anyone have a more elegant solution?

you could write for example Vue directive “q-focused” - here is a base idea with focus for standard input element:

https://vuejs.org/v2/guide/custom-directive.html

Raph

@dnix Thank you, this worked for me.
@metalsadman With or without $el, it is the same result.

Thanks for your help. I really enjoy playing with Quasar !

metalsadman

@Raph you can use async await there and do not need the setTimeout. ie.


async mounted() {
  await this.$nextTick()
  this.$refs.elementReference.$el.focus()
}

No More Posting New Topics!

I can't focus my q-input...