Using the mask plugin throws a DOMException

[bramadityaw]

I am trying to use the mask plugin to format text inside an input box, The problem is that when I input some text to check if formatting works, a DOMException was thrown, saying that an object is no longer usable.

Below is how I initialized the plugin:

import Alpine from 'alpinejs';
import mask from '@alpinejs/mask';

window.Alpine = Alpine;

Alpine.plugin();

Alpine.start();

Output of Alpine.version: "3.15.1"
Version of @alpinejs/mask: "^3.15.1"

Stack trace:

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
    restoreCursorPosition module.esm.js:87
    processInputValue module.esm.js:59
    src_default module.esm.js:40
    src_default module.esm.js:40
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    show alpinejs.js:3225
    skipDuringClone alpinejs.js:1217
    show alpinejs.js:3225
    mutateDom alpinejs.js:173
    show alpinejs.js:3223
    <anonymous> alpinejs.js:3244
    runIfTypeOfFunction alpinejs.js:524
    generateEvaluatorFromString alpinejs.js:503
    tryCatch alpinejs.js:415
    <anonymous> alpinejs.js:3243
    reactiveEffect alpinejs.js:1745
    flushJobs alpinejs.js:31
    queueFlush alpinejs.js:24
    queueJob alpinejs.js:14
    scheduler alpinejs.js:9
    scheduler alpinejs.js:53
    run alpinejs.js:1876
    trigger alpinejs.js:1881
    set3 alpinejs.js:1965
    set alpinejs.js:318
    selectOption create:3079
    anonymous alpinejs.js:3
    generateEvaluatorFromString alpinejs.js:501
    tryCatch alpinejs.js:415
    removeListener alpinejs.js:3268
    handler4 alpinejs.js:2557
    handler4 alpinejs.js:2621
    wrapHandler alpinejs.js:2559
    on alpinejs.js:2624
    <anonymous> alpinejs.js:3267
    skipDuringClone alpinejs.js:1217
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    loop alpinejs.js:3145
    skipDuringClone alpinejs.js:1217
    loop alpinejs.js:3145
    mutateDom alpinejs.js:171
    loop alpinejs.js:3143
    runIfTypeOfFunction alpinejs.js:524
    generateEvaluatorFromString alpinejs.js:503
    tryCatch alpinejs.js:415
    loop alpinejs.js:3042
    <anonymous> alpinejs.js:3027
    reactiveEffect alpinejs.js:1745
    effect2 alpinejs.js:1720
    effect alpinejs.js:51
    wrappedEffect alpinejs.js:67
    <anonymous> alpinejs.js:3027
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    show alpinejs.js:3225
    skipDuringClone alpinejs.js:1217
    show alpinejs.js:3225
    mutateDom alpinejs.js:173
@alpinejs_mask.js:89:6
    restoreCursorPosition module.esm.js:87
    processInputValue module.esm.js:59
    src_default module.esm.js:40
    (Async: EventListener.handleEvent)
    src_default module.esm.js:40
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    show alpinejs.js:3225
    skipDuringClone alpinejs.js:1217
    show alpinejs.js:3225
    mutateDom alpinejs.js:173
    show alpinejs.js:3223
    <anonymous> alpinejs.js:3244
    runIfTypeOfFunction alpinejs.js:524
    generateEvaluatorFromString alpinejs.js:503
    tryCatch alpinejs.js:415
    <anonymous> alpinejs.js:3243
    reactiveEffect alpinejs.js:1745
    flushJobs alpinejs.js:31
    (Async: VoidFunction)
    queueFlush alpinejs.js:24
    queueJob alpinejs.js:14
    scheduler alpinejs.js:9
    scheduler alpinejs.js:53
    run alpinejs.js:1876
    forEach self-hosted:4172
    trigger alpinejs.js:1881
    set3 alpinejs.js:1965
    set alpinejs.js:318
    selectOption create:3079
    anonymous alpinejs.js:3
    generateEvaluatorFromString alpinejs.js:501
    tryCatch alpinejs.js:415
    removeListener alpinejs.js:3268
    handler4 alpinejs.js:2557
    handler4 alpinejs.js:2621
    wrapHandler alpinejs.js:2559
    (Async: EventListener.handleEvent)
    on alpinejs.js:2624
    <anonymous> alpinejs.js:3267
    skipDuringClone alpinejs.js:1217
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    loop alpinejs.js:3145
    skipDuringClone alpinejs.js:1217
    loop alpinejs.js:3145
    mutateDom alpinejs.js:171
    loop alpinejs.js:3143
    runIfTypeOfFunction alpinejs.js:524
    generateEvaluatorFromString alpinejs.js:503
    tryCatch alpinejs.js:415
    loop alpinejs.js:3042
    <anonymous> alpinejs.js:3027
    reactiveEffect alpinejs.js:1745
    effect2 alpinejs.js:1720
    effect alpinejs.js:51
    wrappedEffect alpinejs.js:67
    <anonymous> alpinejs.js:3027
    flushHandlers alpinejs.js:586
    stopDeferring alpinejs.js:591
    deferHandlingDirectives alpinejs.js:594
    initTree alpinejs.js:787
    show alpinejs.js:3225
    skipDuringClone alpinejs.js:1217
    show alpinejs.js:3225
    mutateDom alpinejs.js:173

[ekwoka]

Can you recreate on https://awesomealpine.com/play ?

[bramadityaw]

It seems that if I use the $money mask as shown in the plugin docs, it works fine. Playground

However, if I add another attribute like type or step, the exception is thrown in the console. Playground

[bramadityaw]

Note that the script part should be empty. I don't know how to share it empty.

[ekwoka]

That's really curious 🤨

Thanks