Maskito on IonInput causes DOMException

Ionic Framework Ionic Angular
1

I followed the example in the Ionic docs for using Maskito on an IonInput component. Whenever I change the input’s value in the UI, I get this error:

08:46:00.449 Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
    updateSelectionRange index.esm.js:650
    updateElementState index.esm.js:639
    ensureValueFitsMask index.esm.js:657
    Maskito index.esm.js:601
    Angular 15
    ael index.js:122
    setAccessor index.js:912
    updateElement index.js:975
    createElm index.js:1033
    createElm index.js:1043
    createElm index.js:1043
    addVnodes index.js:1126
    patch index.js:1282
    renderVdom index.js:1464
    callRender index.js:1674
    updateComponent index.js:1614
    Angular 3
    updateComponent index.js:1599
    dispatchHooks index.js:1592
    enqueue index.js:1597
    dispatchHooks index.js:1592
    dispatch index.js:1558
    consume index.js:170
    flush index.js:212
    Angular 21
    raf index.js:121
    queueTask index.js:163
    scheduleUpdate index.js:1559
    schedule index.js:2054
    initializeComponent index.js:2058
    Angular 3
    initializeComponent index.js:1981
    connectedCallback index.js:2117
    connectedCallback index.js:2513
    Angular 6
2 index.esm.js:650:6
    updateSelectionRange index.esm.js:650
    updateElementState index.esm.js:639
    ensureValueFitsMask index.esm.js:657
    Maskito index.esm.js:601
    Angular 15
    ael index.js:122
    setAccessor index.js:912
    updateElement index.js:975
    createElm index.js:1033
    createElm index.js:1043
    createElm index.js:1043
    addVnodes index.js:1126
    patch index.js:1282
    renderVdom index.js:1464
    callRender index.js:1674
    updateComponent index.js:1614
    next self-hosted:1338
    Angular 3
    updateComponent index.js:1599
    dispatchHooks index.js:1592
    enqueue index.js:1597
    dispatchHooks index.js:1592
    dispatch index.js:1558
    consume index.js:170
    flush index.js:212
    Angular 21
    raf index.js:121
    queueTask index.js:163
    scheduleUpdate index.js:1559
    schedule index.js:2054
    initializeComponent index.js:2058
    InterpretGeneratorResume self-hosted:1417
    next self-hosted:1338
    Angular 3
    initializeComponent index.js:1981
    connectedCallback index.js:2117
    connectedCallback index.js:2513
    Angular 6

Here is my IonInput:

<ion-input type="number" [maskito]="numberMask" [maskitoElement]="maskPredicate"></ion-input>

and Maskito config:

  readonly numberMask = {
    mask: /^\d+$/
  };
  readonly maskPredicate: MaskitoElementPredicate = async el =>
    (el as HTMLIonInputElement).getInputElement();

Something to note is that the actual masking logic works just fine. But the DOMException is thrown on every single input change. Also, the masking does work without any errors logged on a native input element, where the maskPredicate is not needed.

Ionic 8
Angular 18
Maskito 3

2

Hi, better late then never and maybe it helps some other people too:
I think the implementation of maskito and Ionic are not 100% compatible. I think it is caused by the ion-input property “type”. As a workaround you could try to eliminate the type.

change

to

<ion-input [maskito]="numberMask" [maskitoElement]="maskPredicate"></ion-input>

if you can do your task without it.
I hope it helps.