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



  • 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 🙂



  • 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… ?


Log in to reply