refactor the currency mask to use native alpine x-model

ariaieboy · May 14, 2024 · dbc207b · dbc207b
1 parent 8523166
commit dbc207b
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/resources/views/currency-mask.blade.php b/resources/views/currency-mask.blade.php
@@ -18,11 +18,11 @@
     $xdata = <<<JS
     {
         input:\$wire.{$applyStateBindingModifiers("\$entangle('{$statePath}')")},
+        masked:'',
         init(){
-        \$el.value = this.input?.toString().replaceAll('.','$decimalSeparator');
+        this.masked = this.input?.toString().replaceAll('.','$decimalSeparator');
+        \$watch('masked',()=>this.updateInput());
         \$watch('input',()=>this.updateMasked());
-        \$el.addEventListener('input',(event)=>this.updateInput());
-        \$el.addEventListener('blur',(event)=>this.updateInput());
         },
         updateMasked(){
             if(typeof Number(this.input) === 'number'){
@@ -79,7 +79,7 @@ class="fi-fo-text-input"
                         'step' => $getStep(),
                         'type' => 'text',
                         'x-data' => $xdata,
-                        'x-on:change'=>'updateInput',
+                        'x-model'=>'masked',
                         'x-mask:dynamic' => $xmask
                     ], escape: false)
             "