"TypeError: this.inputElement is null" still not fully fixed (new error: "No input element found")

[tbl0605]

Hi,
@kaskar2008, I thought that the fix you provided for bug #417 was enough (doing the await this.$slots.default;stuff) but a setTimeout(...) or vm.$nextTick() control is still needed on top of your patch.

I have some "No input element found" errors on very complex and big vue files, this time in a pretty random way (sometimes I get the error when loading a page, sometimes not).

No input element found 4 es6.js:269
    mounted es6.js:269
    (Asynchrone : promise callback)
    _await es6.js:39
    mounted es6.js:261
    _async es6.js:45

Let me explain why:

this issue is a bit different from the original issue, where the problem was that vue-simple-suggest didn't wait on an async component (in its default slot) to be "ready" to be mounted.
Now vue-simple-suggest correctly waits on async components, but wrongly assumes that the vue-simple-suggest instance was mounted (in the virtual dom) AND rendered (in the real DOM) by its component parent when the call for this.inputElement = this.$refs['inputSlot'].querySelector('input') occurs!

The official vue.js 2.0 documentation clearly explains that the mounted() method doesn't guarantee that a component (and its children) will be fully mounted ans rendered:
"Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted" #mounted

So vue-simple-suggest still has to somehow "delay" the access to the real DOM in the mounted() method.

This time, I sadly cannot provide an example to reproduce the problem, it would take me forever to simplify my code to reliably reproduce the problem.

Anyway the fix is easy (I'll provide it later), I simply followed the advice provided by the vue.js documentation:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

[yizen]

Hi,

I think introducing this nextTick callback broke my implementation, and I had to revert to the previous version : here is my best understanding of the issue, documented here if someone stumbles into the same problem.

If I need to set up initial value of the vue-simple-select in my component, I'm mounting my component with :

mounted() {
  this.$refs.simpleSelect.select(this.value)
}

('simpleSelect' is the ref of the vue-simple-suggest in my component)

Since this commit, setting the initial value breaks with the error message :

"TypeError: can't access property "setAttribute", this.inputElement is null" in the "hover" method of es6.js :

hover(item, elem) {
 (...)
      this.inputElement.setAttribute('aria-activedescendant', elemId);

My understanding is since the inputElement is now assigned on "nextTick", it is not yet available when my component is mounted. I tried to wrap my 'select' call in a nextTick callback, but that did not help, and I had to revert to using 1.10.1.

Thank you for this component !