fix(QInput): use-mask does not respect input debounce

quasarframework · Oct 17, 2024 · 913716c · 913716c
1 parent 282bdb4
commit 913716c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/ui/playground/src/pages/form/input-mask.vue b/ui/playground/src/pages/form/input-mask.vue
@@ -6,6 +6,9 @@
       <div>Model: {{ text1 }}</div>
       <q-input mask="date" v-model="text1" filled hint="Date ####/##/##" label="Label" />
 
+      <div>Model with debounce: {{ text1 }}</div>
+      <q-input mask="date" v-model="text1" :debounce="500" filled hint="Date ####/##/##" label="Label" />
+
       <div>Model: {{ text2 }}</div>
       <q-input mask="((###) ### - ####)" v-model="text2" filled hint="Phone ((###) ### - ####)" counter label="Label" />
 

diff --git a/ui/src/components/input/use-mask.js b/ui/src/components/input/use-mask.js
@@ -1,6 +1,7 @@
 import { ref, watch, nextTick } from 'vue'
 
 import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
+import { useTimeout } from '../../composables.js'
 
 // leave NAMED_MASKS at top of file (code referenced from docs)
 const NAMED_MASKS = {
@@ -44,6 +45,8 @@ export const useMaskProps = {
 }
 
 export default function (props, emit, emitValue, inputRef) {
+  const { registerTimeout } = useTimeout()
+
   let maskMarked, maskReplaced, computedMask, computedUnmask, pastedTextStart, selectionAnchor
 
   const hasMask = ref(null)
@@ -304,12 +307,14 @@ export default function (props, emit, emitValue, inputRef) {
       ? unmaskValue(masked)
       : masked
 
-    if (
-      String(props.modelValue) !== val
-      && (props.modelValue !== null || val !== '')
-    ) {
-      emitValue(val, true)
-    }
+    registerTimeout(() => {
+      if (
+        String(props.modelValue) !== val
+        && (props.modelValue !== null || val !== '')
+      ) {
+        emitValue(val, true)
+      }
+    }, props.debounce)
   }
 
   function moveCursorForPaste (inp, start, end) {