Merge pull request #10 from ariaieboy/9-bug-dynamic-update-not-work-w…

…ith-currencymask 9 bug dynamic update not work with currencymask
ariaieboy · Nov 21, 2023 · 54a640b · 54a640b
2 parents 0a9032f + 38d74f0
commit 54a640b
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/resources/views/currency-mask.blade.php b/resources/views/currency-mask.blade.php
@@ -18,13 +18,20 @@
     $xdata = <<<JS
     {
         input:\$wire.{$applyStateBindingModifiers("\$entangle('{$statePath}')")},
-        masked:'',
         init(){
         this.masked = this.input?.toString().replaceAll('.','$decimalSeparator');
-        \$watch('masked',()=>this.updateInput());
+        \$watch('input',()=>this.updateMasked());
+        \$el.addEventListener('input',(event)=>updateInput());
+        \$el.addEventListener('blur',(event)=>updateInput());
+        },
+        updateMasked(){
+            if(typeof this.input === 'number'){
+                \$el.value = this.input?.toString().replaceAll('.','$decimalSeparator');
+                \$el.dispatchEvent(new Event('input'));
+            }
         },
         updateInput(){
-            this.input = this.masked?.replaceAll('$thousandSeparator','').replaceAll('$decimalSeparator','.');
+            this.input = \$el.value?.replaceAll('$thousandSeparator','').replaceAll('$decimalSeparator','.');
         }
     }
 JS;
@@ -70,9 +77,9 @@ class="fi-fo-text-input"
                         'readonly' => $isReadOnly(),
                         'required' => $isRequired() && (! $isConcealed),
                         'step' => $getStep(),
-                       'x-model' => 'masked',
                         'type' => 'text',
                         'x-data' => $xdata,
+                        'x-on:change'=>'updateInput',
                         'x-mask:dynamic' => $xmask
                     ], escape: false)
             "