TypeError: Cannot read property 'toString' of null

#1

What seems to be the problem:
I am getting a JavaScript error on date field

<input class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false" wire:model.defer="birth_date" name="birth_date" type="text" value="" id="birth_date">


@push('scripts')
<script>
    $(document).ready(function(){
        $('[data-mask]').inputmask();
    });
</script>
@endpush

The field behaves fine when the component loads but as soon as the component refreshes, the javascript error is thrown out

Would it be because the JavaScript runs straight away after a component refresh. The page being loaded after the initial loading, the JS does not wait for the component to be fully loaded

Are you using the latest version of Livewire:
yes

#2 
@push('scripts')
<script>

  document.addEventListener("DOMContentLoaded", () => {
         $('[data-mask]').inputmask(); //First load
        Livewire.hook('element.updated', () => {
           $('[data-mask]').inputmask(); /// Rebind the script after each component update
          });
//You can also set the value via javascript base on input event like @this.set('property',value); 
combine with wire:ignore directive, let me know if need help with that
});
</script>
@endpush
#3

@xtreme2020

Hi, sorry for late late reply. Had to work on a different project for a while.
This snippet of script is really good and keeps the mask on all the time.

The date field behaves now properly on chrome.
Firefox however does not behave quite right. The field value is lost after each component refresh.

I have changed the to this

document.addEventListener("DOMContentLoaded", () => {

    $('[data-mask]').inputmask(); //First load

    Livewire.hook('element.updated', () => {
        $('[data-mask]').inputmask(); /// Rebind the script after each component update

    });

    $("#birth_date").blur(function(){
        @this.set('birth_date', $("#birth_date").val() );
    });


});

but I get an error

ErrorException
Undefined variable: _instance

Not sure what it means…

#4

You can also use wire:ignore and set the property value using javascript, that way you won’t have to rebind the javascript each time. if you have problem using wire:ignore let me know.

Test like this

document.addEventListener(“DOMContentLoaded”, () => {

function initJavascript()
{
$(’[data-mask]’).inputmask(); //First load
$("#birth_date").blur(function(){
@this.set(‘birth_date’, $("#birth_date").val() );
});
}

initJavascript();

Livewire.hook('element.updated', () => {
 initJavascript();
});

});