RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.36k stars 2.18k forks source link

Errror Using Livewire: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'charAt') #2777

Closed ozonerik closed 3 months ago

ozonerik commented 3 months ago

i'm same problem when using laravel 9+livewire 2+inputmask latest version:

<input wire:ignore data-inputmask="'autoUnmask': true, 'suffix': ' m2','alias': 'decimal', 'radixPoint':',', 'groupSeparator': '.', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'rightAlign': false " id="luas" type="text" wire:model="luas" class="form-control @if($errors->has('luas')) is-invalid @endif" >

<input wire:ignore data-inputmask="'autoUnmask': true, 'suffix': ' bata','alias': 'decimal', 'radixPoint':',', 'groupSeparator': '.', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'rightAlign': false " id="bata" type="text" wire:model="bata" class="form-control @if($errors->has('luas')) is-invalid @endif" >

inputmask js: <script src="{{ asset('plugins/inputmask509/inputmask.js') }}"></script> <script src="{{ asset('plugins/inputmask509/bindings/inputmask.binding.js') }}"></script>

when I write in the input box I get the following error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'charAt') at y.onBeforeMask (inputmask.js:1784:47) at c (inputmask.js:1963:111) at HTMLInputElement.c (inputmask.js:2834:90) at Object.setInputValue (dom.js:179:16) at Object.setInputValueFromModel (dom.js:150:14) at index.js:367:17 at index.js:525:17 at walk (walk.js:5:9) at walk (walk.js:10:9) at walk (walk.js:10:9)

Techn1c4l commented 3 months ago

I made a simple HTML page using your setup (without Livewire obviously) and it works fine for me. That means your libraries are probably to blame. I suspect wire:model is a some kind of two-way data binding which interferes with the Inputmask. Maybe you can try to specify the initial value of the model. If that doesn't work your only option is to remove Livewire stuff from your inputs and pass values using onChange event handlers like in vanilla JS.

ozonerik commented 3 months ago

@RobinHerbots i same error when i used livewire: but if not used alias error is gone but not mask image

if i used 'alias':'decimal' i got error again image

Techn1c4l commented 3 months ago

@ozonerik No alias means no mask so that's why you aren't getting any errors. There is nothing that Inputmask's author can do here. You have to find a workaround for that yourself.

ozonerik commented 3 months ago

i found the solution just add 'onBeforeMask': function (value) { value=0; return value; },