Quasar: Feature: Autofocusing filter inside of q-select

Created on 29 Jul 2017  路  6Comments  路  Source: quasarframework/quasar

I've been digging around abit and couldnt find option to focus filter (QSearch) inside of QSelect component.
In most cases when you have QSelect with enabled filter you want it to be autofocused so you don't have to click twice ( first on QSelect and then on filter ) before you can start typing.
Im suggesting to add an option to QSelect which enables you to set that autofocus to filter, something like:

<q-select
  class="full-width"
  v-model="selection"
  :options="options"
  @change="changeOption()"
  filter
  autofocusfilter
/>

I made a workaround ( probably the messiest one since im pretty new to quasar and vue ) which looks like this:

<q-select
  ref="selectOption"
  class="full-width"
  v-model="selection"
  :options="options"
  @focus="selectOptionFocus()"
  @change="changeOption()"
  filter
/>

and method selectOptionFocus() :

selectOptionFocus () {
      this.$refs.selectOption.$children[0].$children[0].$children[0].focus()
}

Sorry if it already exists but i just couldn't find it.
On the other note i've noticed that @focus gets called twice ( if you confirm its a bug i can open new issue for it ), similar to this issue: https://github.com/quasarframework/quasar/issues/563

Most helpful comment

autofocus-filter Boolean property available in edge and future v0.14.5. Navigating with keyboard is part of another ticket and will get into Quasar soon too.

All 6 comments

Ditto, having to click twice is questionable UX. Autofocusing filter should probably just be the default.

Additionally, it would be nice if keyboard events worked. Pressing "enter" should select the top-most filtered result, while up/down cursor keys can navigate the list.

Additionally, it would be nice if keyboard events worked. Pressing "enter" should select the top-most filtered result, while up/down cursor keys can navigate the list.

Yep. E.g. like this (not the best example, but the one that works) where you can fill out a form full of selects using keyboard only.

I'll second this!

Will do.

autofocus-filter Boolean property available in edge and future v0.14.5. Navigating with keyboard is part of another ticket and will get into Quasar soon too.

Was this page helpful?
0 / 5 - 0 ratings