quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.96k stars 3.52k forks source link

QInput mask - Value is not emit when the input is fill from right (default fill mode) #15320

Open DaedalusDev opened 1 year ago

DaedalusDev commented 1 year ago

What happened?

When a mask is assiged to a QInput, when the user fill the value from right :

This regression is introduced in quasar@1.22.1 (fix(mask): (backport from Qv2) trim input to the length of the mask (if mask is not reverse) to avoid regex lock https://github.com/quasarframework/quasar/issues/14558 (https://github.com/quasarframework/quasar/pull/14682)). ~This regression is not present in quasar@2.*~

What did you expect to happen?

In default mode, the input must emit the value and fill the mask from left to right.

Reproduction URL

https://codepen.io/daedalusdev/pen/RwBMmMd

How to reproduce?

Bug 1 :

  1. Focus the input and move cursor at end of the mask
  2. Type any number
  3. The cursor is moved to start but no value is filled

Bug 2 :

  1. Focus the input and move cursor at start of the mask
  2. Type any number
  3. The value is filled as expected
  4. Move the cursor at end of the mask
  5. Type any number
  6. Nothing append

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari

Quasar info output

Operating System - Linux(5.15.0-58-generic) - linux/x64
NodeJs - 16.15.1

Global packages
  NPM - 8.11.0
  yarn - Not installed
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - 11.0.0

Important local packages
  quasar - 1.22.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.4.3 -- Quasar Framework local CLI
  @quasar/extras - 1.15.10 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.7.14 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.6.5 -- Official router for Vue.js 2
  vuex - 3.6.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.12 -- Babel compiler core.
  webpack - 4.46.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 - 3.11.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 5.1.4 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- 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*

Networking
  Host - lwf-1
  wlxe0e1a9566580 - 192.168.1.179

Relevant log output

No response

Additional context

No response

thoasty-dev commented 1 year ago

This is also an issue on Quasar v2, as you can test in the docs.

https://quasar.dev/vue-components/input#example--filling-the-mask