Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QAutocomplete: Unprotected access to inputEl in mounted() #2840

Closed
tomers opened this issue Dec 6, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@tomers
Copy link

commented Dec 6, 2018

I stumbled upon unprotected access to inputEl in QAutocomplete's mounted():


  mounted () {
    this.__input.register()
    if (this.__inputDebounce) {
      this.__inputDebounce.setChildDebounce(true)
    }
    this.$nextTick(() => {
      if (this.__input) {
        this.inputEl = this.__input.getEl()
      }
      this.inputEl.addEventListener('keydown', this.__keyboardHandleKey)
      this.inputEl.addEventListener('blur', this.blurHide)
      this.inputEl.addEventListener('focus', this.__focusShowTrigger)
    })
  },

Software version

$ quasar info

Operating System Darwin(17.7.0) - darwin/x64
NodeJs 11.2.0

Global packages
NPM 6.4.1
yarn 1.12.3
quasar-cli 0.17.22
vue-cli 2.9.6
cordova Not installed

Important local packages
quasar-cli 0.17.22 (Quasar Framework CLI)
quasar-framework 0.17.18 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
quasar-extras 2.0.9 (Quasar Framework fonts, icons and animations)
vue 2.5.17 (Reactive, component-oriented view layer for modern web interfaces.)
vue-router 3.0.1 (Official router for Vue.js 2)
vuex 3.0.1 (state management for Vue.js)
electron Not installed
electron-packager Not installed
electron-builder Not installed
@babel/core 7.0.0-beta.54 (Babel compiler core.)
webpack 4.25.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
webpack-dev-server 3.1.10 (Serves a webpack app. Updates the browser on changes.)
workbox-webpack-plugin 3.6.3 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
register-service-worker 1.5.2 (Script for registering service worker, with hooks)

Networking
Host toshalev-mbp
en0 172.22.222.141
en4 172.22.218.96

JsFiddle (for Quasar v0.15+ only)

This bug seems rather obvious, so I didn't bother to try to reproduce in JsFiddle. Please let me know if I should.

What did you get as the error?

vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'addEventListener' of undefined
    at VueComponent.eval (QAutocomplete.js?6b43:224)
    at Array.eval (vue.runtime.esm.js?2b0e:1833)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

Note that this error is from the line this.inputEl.addEventListener('keydown', this.__keyboardHandleKey) which is unprotected (this.inputEl could be undefined
)

What were you expecting?

Nothing.

What steps did you take, to get the error?

I switch back and forth to a page which contains a component with the following template:

<template>
  <q-search
    v-model="model"
    v-bind="{clearable, placeholder}"
    @input="val => $emit('input', val)"
  >
    <q-autocomplete
      v-bind="{debounce, minCharacters}"
      :max-results="100"
      @search="(val, done) => $emit('search', val, done)"
      @selected="val => $emit('selected', val)"
    />
  </q-search>
</template>
@rstoenescu

This comment has been minimized.

Copy link
Member

commented Dec 9, 2018

Thanks for reporting!

@rstoenescu rstoenescu closed this Dec 9, 2018

@hannupaasonen

This comment has been minimized.

Copy link
Contributor

commented Jan 11, 2019

Im still getting the same error on Quasar Framework v0.17.19.

Operating System         	Darwin(16.4.0) - darwin/x64
NodeJs                   	9.9.0

Global packages
  NPM                    	6.5.0
  yarn                   	1.12.3
  quasar-cli             	0.17.23
  vue-cli                	3.1.1
  cordova                	8.1.2 (cordova-lib@8.1.1)

Important local packages
  quasar-cli             	0.17.23	(Quasar Framework CLI)
  quasar-framework       	0.17.19	(Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
  quasar-extras          	2.0.9	(Quasar Framework fonts, icons and animations)
  vue                    	2.5.17	(Reactive, component-oriented view layer for modern web interfaces.)
  vue-router             	3.0.1	(Official router for Vue.js 2)
  vuex                   	3.0.1	(state management for Vue.js)
  electron               	Not installed
  electron-packager      	Not installed
  electron-builder       	Not installed
  @babel/core            	7.0.0-beta.54	(Babel compiler core.)
  webpack                	4.25.1	(Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
  webpack-dev-server     	3.1.14	(Serves a webpack app. Updates the browser on changes.)
  workbox-webpack-plugin 	3.6.3	(A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
  register-service-worker	1.5.2	(Script for registering service worker, with hooks)

Here's my template:

<template>
  <div class="asiakas-select">
    <q-input
      float-label="Asiakas"
      v-model="localValue"
      :readonly="readonly"
      :disabled="readonly"
      :clearable="!readonly"
      @clear="clear"
    >
      <q-autocomplete
        separator
        :min-characters="2"
        @search="search"
        @selected="selected"
        :value-field="(v) => v.label"
      />
    </q-input>
  </div>
</template>

It seems that this.inputEl = this.__input.getEl() returns undefined.

Got any ideas?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.