Quasar: Qselect bad ux when custom value is allowed and chips are not used at the same time

Created on 17 Feb 2020  路  3Comments  路  Source: quasarframework/quasar

First of all, thank you for great library! :)

Describe the bug
When you allow user to add custom value and you are not using chips and multiple value, then the behaiour of element is very unexpecting.

  1. you need to hit ENTER button to set the value, so you cannot tab away to another input, because you loose your input
  2. when you hit the ENTER to save the value it disapear and reappear on focusing elsewhere

My use case.. I would like to user be able to use it as common input and be able also select from options provided. It is their decision whether hi fills value manually or use some of options provided.
Only one value is allowed but the value can have multiple words "Wall street" for example. I am using google api to search for street names, but some are not provided so I want to keep the posibillity to enter custom value.

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/luckylooke11/pen/dyoMroN?editors=1010

To Reproduce
Steps to reproduce the behavior:

  1. click to "street" input
  2. enter value (do not hit enter at the end)
  3. press TAB button to focus on next input
    the value disappear
  4. press Shift+TAB to focus back on street input and enter value again
  5. now press enter
    value temporary disappear
  6. press TAB to focus on next input
  7. "Street" value reappear

Expected behavior

  1. click to "street" input
  2. enter value (do not hit enter at the end)
  3. press TAB button to focus on next input
    the value in "street" input stays and is set to model
  4. press Shift+TAB to focus back on street input and enter value again
  5. now press enter
    value does not disappear

Platform (please complete the following information):
OS: MacOS but I believe it is OS agnostic
Node: irrelevant
NPM: irrelevant
Yarn: irrelevant
Browsers: Chrome
iOS: did not try
Android: did not try
Electron: did not try

Thank you very much for dealing with this problem.

bug

Most helpful comment

Hello - this is fixed in quasar v1.9.3
Now you can also add new values on TAB.

All 3 comments

Hello - this is fixed in quasar v1.9.3
Now you can also add new values on TAB.

I can confirm that issue is fixed! 馃憦 馃憦 馃憦

Same code with new version of lib:
https://codepen.io/luckylooke11/pen/XWbNjaK?editors=1010

Thank you very much! 馃檹

Was this page helpful?
0 / 5 - 0 ratings