[Feat] Improve QSelect #1186

alexdee2007 · 2017-11-26T20:04:10Z

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

Some explanation of this proposed feature

When focused on select field (by press key "Tab" on previous field eg) then press key "Enter" will be show popover with list options. If there is a filter then it will be focused (assumed that user uses keyboard and dont want mouse click). Keyboard navigation when filter focused also available.

When popover with list options showing - if there is selected item(s) (field value) then viewport will scroll first encountered option in the middle viewport.
And there is available navigation:

Press key "Up" or "Down"

navigate by list options. Viewport will scroll automatically.

Pres key "Enter" on option:

when select has multiple values - will be toggle value
when select has one value - this value will be selected, popover hide and this select field will be focused so user can "Tab" to the next field or reopen this

Press key "Esc":

popover hide and select field will be focused so user can "Tab" to next field or reopen this popover

Press key "Tab":

popover hide and focus go to the next field (ordering by tabindex or by position in dom)

Press keys "Shift+Tab":

popover hide and focus go to the previuos field (ordering by tabindex or by position in dom)

When user inputs a filter then first option suggest to be "enter" (only on desktop platform)

Additional info:

Add props list-max-height to select component (maxHeight popover nevertheless has 100vh so list options in any case will be within the screen area)
Fix toggle show/hide popover when click on field
Remove props autofocus-filter. Filter will be focus on desktop platform automatically
Fix twice emitting blur and focus
Dropdown icon rotate when open/hide popover
Smooth popover reposition (popover jumps around the screen when input filter and popover located at the top of the field )
Fix lose focus when click on chips and clear
Add props autoOpen, loading, loadingLabel, noResultsLabel, noDataLabel and implements
Mouse and keyboard have same selection
Add selects labels loadingLabel, noResultsLabel, noDataLabel to i18n
Allow prop multiple set limit
Add prop limit to QOptionGroup

close #903

* Add props scroll-height to select component * Function prevent is placed in a separate module * Fix in Autocomplete component (addEventListener on 'keydown')

alexdee2007 · 2017-11-26T20:39:32Z

#903
#761
q-select using the keyboard instead of mouse clicks?
Desktop/keyboard navigation for components?

pdanpdan · 2017-11-27T04:55:18Z

src/components/select/QSelect.vue

+          case 40: // down
+            this.__moveCursor(1, e)
+            break
+          case 13: // enter


Please also add SPACE as selection toggle

Will add, thanks )

Hmm... Adding SPACE handler will make it impossible to enter a space in the filter. I revert this change. Let's wait for @rstoenescu

pdanpdan · 2017-11-27T04:57:48Z

src/components/select/QSelect.vue

@@ -170,7 +178,11 @@ export default {
    autofocusFilter: Boolean,
    radio: Boolean,
    placeholder: String,
-    separator: Boolean
+    separator: Boolean,
+    scrollHeight: {


Use a more appropriate name like listMaxHeight and use an empty default

Good point, thanks! listMaxHeight will be more appropriate.
I`m not sure about empty default. E.g. IE do not recognized scroll on viewport without setting "heigh" or "max-heigt" property...

Let's wait for Razvan's opinion on this also. (@rstoenescu)

* add SPACE as set current selection thanks (pdanpdan)[https://github.com/pdanpdan]

* QAutocomplete.vue -> QAutocomplete.js

* remove props autofocus-filter * autofocus filter only on desktop platform * first suggestion in list only on desktop * fix emit blur and focus

* fix needless emit focus when click on current field

* Implement disabled individual options in QSelect (quasarframework#1051)

…r class contains * QSelect: some refactoring

* wip

* some adpat fixes and refactors

wc-matteo · 2018-02-19T14:29:23Z

These improvements would be really nice! Let's hope they get merged soon!

wink wink nudge nudge

dietrichg · 2019-01-30T08:19:50Z

Can we also have an option to filter if the user starts typing and the QSelect is focused?
Much how the native select works where you can type to select available options in the list without having to drill into it. This helps for data-entry focused people who are familiar with the available options already

alexdee2007 · 2019-01-30T08:24:13Z

Can we also have an option to filter if the user starts typing and the QSelect is focused?
Much how the native select works where you can type to select available options in the list without having to drill into it. This helps for data-entry focused people who are familiar with the available options already

As far as i know it will be available in v1

smolinari · 2019-01-30T12:11:11Z

It is!

Scott

alexdee2007 added 2 commits November 26, 2017 19:05

* Add keyboard navigate

d2be922

* Add props scroll-height to select component * Function prevent is placed in a separate module * Fix in Autocomplete component (addEventListener on 'keydown')

* Fix IE scroll (clientHeight)

fe83497

alexdee2007 changed the title ~~Feature: Add keyboard navigate to select component~~ Feature: Add keyboard navigate to select component #761 Nov 26, 2017

alexdee2007 changed the title ~~Feature: Add keyboard navigate to select component #761~~ Feature: Add keyboard navigate to select component (#761) Nov 26, 2017

alexdee2007 and others added 3 commits November 26, 2017 23:05

Merge origin/dev into select-keyboard-navigate

823113f

* Fix new popover behavior

51b69e5

* refactor offset (scrollIntoView)

58afc4d

pdanpdan suggested changes Nov 27, 2017

View reviewed changes

alexdee2007 and others added 15 commits November 27, 2017 12:03

* change props name scrollHeight to listMaxHeight

2f7cf4e

* add SPACE as set current selection thanks (pdanpdan)[https://github.com/pdanpdan]

* revert add SPACE as set current selection

19af1c9

* fix undefined this.visibleOptions[this.selectedIndex]

2a495d0

* Refactor scrollToSelectedItem

55239ef

* Merge origin/dev into select-keyboard-navigate

f7dd04b

* QAutocomplete.vue -> QAutocomplete.js

* fix toggle show/hide popover when click on field

854a619

* remove props autofocus-filter * autofocus filter only on desktop platform * first suggestion in list only on desktop * fix emit blur and focus

* remove filter focus from __onFocus

e1d4b44

* fix needless emit blur when filter focused

2bfbb87

* fix needless emit focus when click on current field

* little refactoring

a1cbbf7

* Merge dev into select-keyboard-navigate

69fad36

* Implement disabled individual options in QSelect (quasarframework#1051)

* Add Document.hasFocus() check to __onBlur method

873e82b

Merge branch 'dev' into select-keyboard-navigate

c5668a7

* listShowing & onclick -> anchorEl

51ddccd

Merge origin/dev into select-keyboard-navigate

b35febf

* QPopover: implememnt anchorEl as anchorEl.parentNode from q-if-inne…

18f889e

…r class contains * QSelect: some refactoring

alexdee2007 closed this Dec 1, 2017

alexdee2007 deleted the select-keyboard-navigate branch December 1, 2017 11:26

Merge origin/dev into select-keyboard-navigate

972bd9b

alexdee2007 reopened this Dec 2, 2017

alexdee2007 added 2 commits December 3, 2017 20:25

Merge origin/dev into select-keyboard-navigate

fdade49

* Fix focused when show popover

960b101

alexdee2007 added 4 commits December 13, 2017 21:42

Merge origin/dev into select-keyboard-navigate

aaa66a8

Merge origin/dev into select-keyboard-navigate

c46441c

* Add Brazilian Portuguese translation for select

e3156c6

* smooth popover reposition (onInputFilter above the field)

89926e7

alexdee2007 changed the title ~~[Featue] Improve QSelect~~ [WIP] Improve QSelect Dec 15, 2017

alexdee2007 added 5 commits December 15, 2017 17:10

* add multiple limit

5515fd4

* wip

Merge origin/dev into select-keyboard-navigate

b7da33e

* fix $q.icon.select.dropdown -> $q.icon.input.dropdown

e9d8bd1

* wip

1db9bb2

* add toggle limit test

b307214

alexdee2007 changed the title ~~[WIP] Improve QSelect~~ [Feat] Improve QSelect Dec 16, 2017

alexdee2007 and others added 10 commits December 18, 2017 10:13

Merge origin/dev into select-keyboard-navigate

5c6d673

* remove redundant css cursor-not-allowed

710d463

Merge origin/dev into select-keyboard-navigate

f54beb0

Merge origin/dev into select-keyboard-navigate

5bd8dfc

Merge origin/dev into select-keyboard-navigate

c162aae

Merge origin/select-keyboard-navigate into select-keyboard-navigate

fd06271

Merge origin/dev into select-keyboard-navigate

2eae3ed

* fix backers

bcd7783

* resolve conflicts

a5b86a9

* some adpat fixes and refactors

Merge origin/select-keyboard-navigate into select-keyboard-navigate

2b21c1d

rstoenescu added this to the v0.17.0 milestone Jul 27, 2018

rstoenescu closed this Jul 27, 2018

snyk-bot mentioned this pull request Apr 14, 2021

[Snyk] Fix for 1 vulnerabilities jamijam/quasar#20

Open

snyk-bot mentioned this pull request Apr 27, 2021

[Snyk] Fix for 1 vulnerabilities jamijam/quasar#22

Open

jamijam mentioned this pull request Oct 1, 2023

[Snyk] Fix for 1 vulnerabilities jamijam/quasar#69

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] Improve QSelect #1186

[Feat] Improve QSelect #1186

alexdee2007 commented Nov 26, 2017 •

edited

Loading

alexdee2007 commented Nov 26, 2017 •

edited

Loading

pdanpdan Nov 27, 2017

alexdee2007 Nov 27, 2017

alexdee2007 Nov 27, 2017 •

edited

Loading

pdanpdan Nov 27, 2017

alexdee2007 Nov 27, 2017

pdanpdan Nov 27, 2017

wc-matteo commented Feb 19, 2018

dietrichg commented Jan 30, 2019

alexdee2007 commented Jan 30, 2019

smolinari commented Jan 30, 2019

[Feat] Improve QSelect #1186

[Feat] Improve QSelect #1186

Conversation

alexdee2007 commented Nov 26, 2017 • edited Loading

Some explanation of this proposed feature

alexdee2007 commented Nov 26, 2017 • edited Loading

pdanpdan Nov 27, 2017

Choose a reason for hiding this comment

alexdee2007 Nov 27, 2017

Choose a reason for hiding this comment

alexdee2007 Nov 27, 2017 • edited Loading

Choose a reason for hiding this comment

pdanpdan Nov 27, 2017

Choose a reason for hiding this comment

alexdee2007 Nov 27, 2017

Choose a reason for hiding this comment

pdanpdan Nov 27, 2017

Choose a reason for hiding this comment

wc-matteo commented Feb 19, 2018

dietrichg commented Jan 30, 2019

alexdee2007 commented Jan 30, 2019

smolinari commented Jan 30, 2019

alexdee2007 commented Nov 26, 2017 •

edited

Loading

alexdee2007 commented Nov 26, 2017 •

edited

Loading

alexdee2007 Nov 27, 2017 •

edited

Loading