Quasar: Autocomplete doesn't register parent QInput

Created on 2 Jan 2018  路  8Comments  路  Source: quasarframework/quasar

Software version

Quasar: 0.14.7
OS: Windows 10
Node: 8.1.4
NPM: 5.4.2
Browsers: Chrome 63.0.3239.84

What did you get as the error?

When i upgraded to quasar 0.14.7, my QAutocomplete stopped working. After some digging around it seems that it can't detect it's parent QInput or QSearchcomponent. The error i'm getting is:
Error in mounted hook: "TypeError: Cannot read property 'register' of undefined"

In the following snippet is the location from where the error is thrown:

  mounted: function mounted () {
    var this$1 = this;

    if (this.__input === null) {
      console.error('Autocomplete needs to be inserted into a QInput or QSearch component.');
      return
    }
    this.__input.register();  // This is the line where the error was thrown!
    if (this.__inputDebounce) {
      this.__inputDebounce.setChildDebounce(true);
    }
    this.$nextTick(function () {
      this$1.inputEl = this$1.__input.getEl();
      this$1.inputEl.addEventListener('keyup', this$1.__handleKeypress);
    });
  },

What were you expecting?

A working autocomplete

What steps did you take, to get the error?

I created this autocomplete:

<q-input v-model="terms" placeholder="Type something">
      <q-autocomplete
        @search="search"
        :min-characters="2"/>
    </q-input>

All 8 comments

Hi,

Something must be wrong in your app.
Take a look at docs again pls: http://quasar-framework.org/components/autocomplete.html
and at the demo on docs page: http://quasar-framework.org/quasar-play/android/index.html#/showcase/forms/autocomplete
and at the demo's source code: https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/forms/autocomplete.vue

The autocomplete has been battle tested, so something must be wrong in your usage. If you are following everything to the letter, then pls reopen with your exact .vue file.
Thank you!

hey, @rstoenescu, actually this is happing. I'm getting the same error too, and everything is just docs says.

Fixed in v0.15-beta.10

What version of Vue do you use?
Can you provide web access to a demo showing the problem?

Tomorrow, @pdanpdan.

The problem is really complex. Has to do with HMR and some Vue lifecycle hooks. There's been another patch done recently which will get into 0.15.7 (releasing today). So expect this issue to finally vanish for good.

I couldn't debug this issue, so I ended up doing something like

<q-input ref="parentInput">
  <q-autocomplete v-if="$refs.parentInput"> 

Said error doesn't stops the autocomplete from working, but if I want to get rid of the console error, I have to set a reference on parent and apply a conditional

@Kminkjan @Frondor can you confirm this is no longer a problem with Quasar 0.15.7?

Was this page helpful?
0 / 5 - 0 ratings