q-select new-value-mode misbehaves when adding new values

[Jille]

trafficstars

What happened?

I created a <q-select v-model="model" label="Label" use-input new-value-mode="add" :options="options" /> and tried to add new values. Once I blur the field the value disappears.

There seems to be a difference in blurring the field by clicking elsewhere, and using tab to focus the next field. The behavior when using tab seems correct, but if I click elsewhere the value is lost.

Enabling fill-input changes the behavior to be buggy in a different way. Values are still lost, and the field seems to contain two values at once.

What did you expect to happen?

If I type a value and then blur the q-select, I expect the value to be remembered.

If I type a value that is the same as one of the options (ignoring case?) then it's fine to change the value to the exact casing of the option.

Reproduction URL

https://codepen.io/Jille_/pen/KKomxqQ

How to reproduce?

Case 1

1. Go to the repro link
2. Type "Hello" in the first field
3. Click somewhere in the white area
4. Be surprised it resets to "Ford".

Case 2

1. Go to the repro link
2. Type "Hello" in the first field
3. Use tab to focus the next field
4. Be happy it stays "Hello".

Case 3

1. Go to the repro link
2. Select "Ford" in the first field
3. Click somewhere in the white area
4. Focus the field again, use backspace to clear "Ford" and type "Hello"
5. Blur the field (either by clicking or tab)
6. Be surprised it resets to "Ford"

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.15.0-27-generic) - linux/x64
NodeJs - 17.9.0

Global packages
  NPM - 8.5.5
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.7 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.2
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.9 -- Babel compiler core.
  webpack - 5.73.0 -- 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 - 4.9.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[pdanpdan]

Tab and Enter are used to:

• select the highlighted option in the list (if it is something selected)
• use the typed text if there is text and no option in the list is highlighted

Esc and click outside both cancel the change

I cannot reproduce 1) 2) is normal behaviour 3) when you delete Ford or whatever value was selected the highlighted option in the list stays at that value - so in order to be able to select your new Hello text you need to move the selection cursor in the list on top (so no item is highlighted)

The problems in 3) are usually auto-solved by also using filtering on the list

[pdanpdan]

As:

• I cannot reproduce 1)
• 2. and 3) are normal/expected

I will close this.

But If you have some more details on how to reproduce 1) or other comments please put them here so we can check.

[straurob]

I cannot reproduce 1)

I have the same question as the author and I can reproduce the issue using the provided link:

https://codepen.io/Jille_/pen/KKomxqQ

Steps to reproduce

1. Click the Label select component and select value "Ford". Value is set correctly :heavy_check_mark:
2. Now type some text into the component which is not in the list. Click outside the component. Now, the value is reset to "Ford" but it does not keep the newly typed value.

Maybe this screencast helps...

Screencast from 2023-01-12 09-31-54.webm

[pdanpdan]

yes, it's expected

Tab and Enter are used to:

• select the highlighted option in the list (if it is something selected)
• use the typed text if there is text and no option in the list is highlighted

Esc and click outside both cancel the change

I'm not sure it's the best behavior, but it works as it was designed