QInput with mask incorrectly caching modelValue and not updating when prop changes

[euphemism]

What happened?

Using a QInput with a mask, I am attempting to transform the input value to an uppercase string before updating the model value. When using a mask, the text in the input field does not correctly reflect the now uppercase model value.

The last example in the reproduction CodePen binds its modelValue to the QInput's key, forcing a re-render of the component when the value changes. This results in the mask being updated. It seems like the initial value of the modelValue prop is cached and then treated as the source of truth internally, and later updates to the modelValue prop are ignored.

What did you expect to happen?

When the update:model-value event is fired, and the code in the callback transforms the new value to uppercase and updates modelValue, the QInput with the mask prop set should update the rendered input string to take into account the new model value.

Reproduction URL

https://codepen.io/euphemism/pen/yLPGbea?editors=1000

How to reproduce?

1. Go to the provided reproduction link
2. Type lowercase letters into the inputs
3. Observe the hint bellow the fields that displays the current modelValue and how it does not match the text in the fields (Excepting the first, non-masked input field, and the last field which is forcibly re-rendered on model change).

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Safari, Microsoft Edge

Quasar info output

Operating System - Darwin(21.3.0) - darwin/x64
NodeJs - 16.11.0

Global packages
  NPM - 8.0.0
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.5.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.12.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.5 -- Babel compiler core.
  webpack - 5.69.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 - 4.7.4 -- 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]

Just as a quick solution:

• use A or X instead of N for mask value (remove the code that does the external conversion to uppercase)

[rstoenescu]

Fix will be available in Quasar v2.6.0 and v1.18.6