Inputmask fails to handle null value

[Programmer359]

trafficstars

I have an implementation for an inputmask for the Federal Tax Id (EIN) which includes numbers and a dash. If the form is submitted with this field left blank it throws a javascript error (see below). This does not happen with other inputmask types. The "autoUnmask" attribute is set to true. Are there any other setting that allow the inputmask to handle null values better?

This is the current set up:

BusinessTaxId: { mask: '[9{2}-9{7}]', placeholder: ' ', rightAlign: false, autoUnmask: true, greedy: false },

The error is “TypeError: Cannot read property ‘_valueGet’ of undefined”, thrown on the first line of the following function in inputmask,js:

function submitEvent(e) { undoValue !== getBuffer().join("") && $el.trigger("change"), opts.clearMaskOnLostFocus && -1 === getLastValidPosition() && el.inputmask._valueGet && el.inputmask._valueGet() === getBufferTemplate().join("") && el.inputmask._valueSet(""), opts.removeMaskOnSubmit && (el.inputmask._valueSet(el.inputmask.unmaskedvalue(), !0), setTimeout(function() { writeBuffer(el, getBuffer()); }, 0)); }

[RobinHerbots]

Hi @Programmer359 ,

Can you create a jsfiddle or alike for it.

[Programmer359]

This is part of a .Net mvc program and I don't have a jsfiddle that duplicates the error. On form submit, ajax is called first, then jQuery cycles through its "dispatch: function(event) { }", and goes straight to the error above when it reaches the textbox with the inputmask in question.

[Programmer359]

The page removes the inputmask before submitting. In inputmask macro function maskScope(actionObj, maskset, opts) is a test "if (void 0 !== actionObj) switch (actionObj.action)" with case: "remove". This sets el.inputmask to void 0 but the submitEvent(e) method still fires and attempts to get attributes like '_valueSet()' from the undefined object throwing the error.

It is possible that submitEvent(e) should also be removed. Please let me know your thoughts on this subject. Are there any planned changes to inputmask.js that might address this, or do you have any suggested workarounds?

Thank you.

[RobinHerbots]

@Programmer359 ,

Why do you remove the mask on submit? You can use the removeMaskOnSubmit option for that. Anyway I should add an extra check to prevent the error.

[kevinpohlmeier]

This is pretty hacky, but it did at least prevent that error. In the code that removes the mask before submitting:

$(this).inputmask('remove');
if (!this.value) {
    this.inputmask = {};
}

[brandynbennett]

I'm experiencing a similar issue on this line https://github.com/RobinHerbots/Inputmask/blob/f1cc9e3e05b85c5cf38e41232f475ecada1826ed/lib/eventhandlers.js#L364 that only happens in some tests I have that insert and remove inputs so quickly that the focus event handler isn't cleaned up and still fires even after i've called inputmask.remove(); Happening on v5.0.1

[julienGrd]

I'm experiencing a similar issue on this line

https://github.com/RobinHerbots/Inputmask/blob/f1cc9e3e05b85c5cf38e41232f475ecada1826ed/lib/eventhandlers.js#L364

that only happens in some tests I have that insert and remove inputs so quickly that the focus event handler isn't cleaned up and still fires even after i've called inputmask.remove(); Happening on v5.0.1

@brandynbennett im facing the same "kind" of issue. Did you find a way to resolve it ?

Me the problem is here Uncaught (in promise) TypeError: Cannot read property 'toString' of null at c (jquery.inputmask.js:1271)

the problem seem to be here l1271 (t is null) t = t.toString().split(""))

personnally i don't find another way than update directly the source code to replace

function c(e, t) {
                     var a = e ? e.inputmask : this, i = a.opts;
                        e.inputmask.refreshValue = !1, "function" == typeof i.onBeforeMask && (t = i.onBeforeMask.call(a, t, i) || t),
                            d(e, !0, !1, t = t.toString().split("")), a.undoValue = o.getBuffer.call(a).join(""),
                            (i.clearMaskOnLostFocus || i.clearIncomplete) && e.inputmask._valueGet() === o.getBufferTemplate.call(a).join("") && -1 === o.getLastValidPosition.call(a) && e.inputmask._valueSet("");
                    
                }

by

function c(e, t) {
                    if (t != null && t != undefined) {
                        var a = e ? e.inputmask : this, i = a.opts;
                        e.inputmask.refreshValue = !1, "function" == typeof i.onBeforeMask && (t = i.onBeforeMask.call(a, t, i) || t),
                            d(e, !0, !1, t = t.toString().split("")), a.undoValue = o.getBuffer.call(a).join(""),
                            (i.clearMaskOnLostFocus || i.clearIncomplete) && e.inputmask._valueGet() === o.getBufferTemplate.call(a).join("") && -1 === o.getLastValidPosition.call(a) && e.inputmask._valueSet("");
                    }
                    
                }

im on 5.0.6 beta50

thanks !

[andreas-mausch]

I get the same error when combining inputmask 5.0.6 with mcdatepicker and clicking the Clear button.

[hartadi]

I'm experiencing a similar issue on this line https://github.com/RobinHerbots/Inputmask/blob/f1cc9e3e05b85c5cf38e41232f475ecada1826ed/lib/eventhandlers.js#L364

that only happens in some tests I have that insert and remove inputs so quickly that the focus event handler isn't cleaned up and still fires even after i've called inputmask.remove(); Happening on v5.0.1

@brandynbennett im facing the same "kind" of issue. Did you find a way to resolve it ?

Me the problem is here Uncaught (in promise) TypeError: Cannot read property 'toString' of null at c (jquery.inputmask.js:1271)

the problem seem to be here l1271 (t is null) t = t.toString().split(""))

personnally i don't find another way than update directly the source code to replace

function c(e, t) {
                     var a = e ? e.inputmask : this, i = a.opts;
                        e.inputmask.refreshValue = !1, "function" == typeof i.onBeforeMask && (t = i.onBeforeMask.call(a, t, i) || t),
                            d(e, !0, !1, t = t.toString().split("")), a.undoValue = o.getBuffer.call(a).join(""),
                            (i.clearMaskOnLostFocus || i.clearIncomplete) && e.inputmask._valueGet() === o.getBufferTemplate.call(a).join("") && -1 === o.getLastValidPosition.call(a) && e.inputmask._valueSet("");
                    
                }

by

function c(e, t) {
                    if (t != null && t != undefined) {
                        var a = e ? e.inputmask : this, i = a.opts;
                        e.inputmask.refreshValue = !1, "function" == typeof i.onBeforeMask && (t = i.onBeforeMask.call(a, t, i) || t),
                            d(e, !0, !1, t = t.toString().split("")), a.undoValue = o.getBuffer.call(a).join(""),
                            (i.clearMaskOnLostFocus || i.clearIncomplete) && e.inputmask._valueGet() === o.getBufferTemplate.call(a).join("") && -1 === o.getLastValidPosition.call(a) && e.inputmask._valueSet("");
                    }
                    
                }

im on 5.0.6 beta50

thanks !

thanks for this solution, but i suggest using coalescing to empty string, i'm using laravel-livewire, its working as intended now

jquery.inputmask.js version: 5.0.8-beta.72 line: 1418

function c(e, t) {
    // fix, convert null / undefined value to empty string
    t = t || "";    
    var i = e ? e.inputmask : this, a = i.opts;
    e.inputmask.refreshValue = !1, "function" == typeof a.onBeforeMask && (t = a.onBeforeMask.call(i, t, a) || t),
    f(e, !0, !1, t = t.toString().split("")), i.undoValue = i._valueGet(!0), (a.clearMaskOnLostFocus || a.clearIncomplete) && e.inputmask._valueGet() === r.getBufferTemplate.call(i).join("") && -1 === r.getLastValidPosition.call(i) && e.inputmask._valueSet("");
}

[RobinHerbots]

This should be fixed in Version: 5.0.8-beta.77.

If not please provide some fiddle and reopen the issue.