RobinHerbots / Inputmask

Input Mask plugin

Home Page:https://robinherbots.github.io/Inputmask/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

ozonerik opened this issue · comments

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)

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.

@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

@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.

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