Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Raph
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 3
    • Best 2
    • Groups 0

    Raph

    @Raph

    2
    Reputation
    8
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Raph Follow

    Best posts made by Raph

    • RE: I can't focus my q-input...

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

      posted in Help
      R
      Raph
    • RE: I can't focus my q-input...

      @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 ! 😁

      posted in Help
      R
      Raph

    Latest posts made by Raph

    • RE: I can't focus my q-input...

      @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 ! 😁

      posted in Help
      R
      Raph
    • RE: I can't focus my q-input...

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

      posted in Help
      R
      Raph
    • 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 🙂

      posted in Help
      R
      Raph