jQuery Inputmask Plugin prevents form from submitting when a masked field has the "readonly" attribute

I am using this jQuery Plugin https://github.com/RobinHerbots/Inputmask to enable inputfield masking.

In some forms I have to display readonly fields which also have a mask applied to them. This however prevents the form from being submitted via jQuery $("#form").submit(). I'd really appreciate if someone could help me out with this...

$('[data-inputmask]').inputmask();

$('#send').click(function() {
    $('#form').submit();
});
  
$('#send2').click(function() {
    $('#form2').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6-beta.12/dist/jquery.inputmask.js"></script>

<h4>Won't submit (includes readonly field)</h4>
<form id="form" action="" method="POST">
    <input readonly type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send">send</button>

<h4>Works fine:</h4>
<form id="form2" action="" method="POST">
    <input type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send2">send</button>

I think I narrowed the problem down to this piece of code in the inputmask plugin. It looks as if the default event (submit) is prevented in case the form has a readOnly field:

 var EventRuler = {
        on: function on(input, eventName, eventHandler) {
            var $ = input.inputmask.dependencyLib, ev = function ev(e) {
                e.originalEvent && (e = e.originalEvent || e, arguments[0] = e);
                var that = this, args, inputmask = that.inputmask, opts = inputmask ? inputmask.opts : void 0;
                if (void 0 === inputmask && "FORM" !== this.nodeName) {
                    var imOpts = $.data(that, "_inputmask_opts");
                    $(that).off(), imOpts && new _inputmask.default(imOpts).mask(that);
                } else {
                    if ("setvalue" === e.type || "FORM" === this.nodeName || !(that.disabled || that.readOnly && !("keydown" === e.type && e.ctrlKey && 67 === e.keyCode || !1 === opts.tabThrough && e.keyCode === _keycode.default.TAB))) {
                        switch (e.type) {
                            case "input":
                                if (!0 === inputmask.skipInputEvent || e.inputType && "insertCompositionText" === e.inputType) return inputmask.skipInputEvent = !1,
                                    e.preventDefault();
                                break;

                            case "keydown":
                                inputmask.skipKeyPressEvent = !1, inputmask.skipInputEvent = inputmask.isComposing = e.keyCode === _keycode.default.KEY_229;
                                break;

                            case "keyup":
                            case "compositionend":
                                inputmask.isComposing && (inputmask.skipInputEvent = !1);
                                break;

                            case "keypress":
                                if (!0 === inputmask.skipKeyPressEvent) return e.preventDefault();
                                inputmask.skipKeyPressEvent = !0;
                                break;

                            case "click":
                            case "focus":
                                return inputmask.validationEvent ? (inputmask.validationEvent = !1, input.blur(),
                                    (0, _inputHandling.HandleNativePlaceholder)(input, (inputmask.isRTL ? _positioning.getBufferTemplate.call(inputmask).slice().reverse() : _positioning.getBufferTemplate.call(inputmask)).join("")),
                                    setTimeout(function() {
                                        input.focus();
                                    }, 3e3)) : (args = arguments, setTimeout(function() {
                                    input.inputmask && eventHandler.apply(that, args);
                                }, 0)), !1;
                        }
                        var returnVal = eventHandler.apply(that, arguments);
                        return !1 === returnVal && (e.preventDefault(), e.stopPropagation()), returnVal;
                    }
                    e.preventDefault();
                }
            };
            input.inputmask.events[eventName] = input.inputmask.events[eventName] || [], input.inputmask.events[eventName].push(ev),
                [ "submit", "reset" ].includes(eventName) ? null !== input.form && $(input.form).on(eventName, ev.bind(input)) : $(input).on(eventName, ev);
        },

Edit: I would like to know if this is a bug, or if I'm doing something wrong.

So, after spending hours i found out for you this is definitely as bug hence why you are experiencing this issue. I will be raising a github issue for this bug or if you want to do it let me know.

If you have a form which includes any disabled or readonly fields you can use this script CDN version of inputmask There is no difference between 4.0 and 5.0 version all the features are same. All yours forms will be submitted normally with all input mask working.

Live Working Demo:

$('[data-inputmask]').inputmask();

$('#send').click(function() {
  $('#form').submit();
});

$('#send2').click(function() {
  $('#form2').submit();
});

$('#send3').click(function() {
  $('#form2').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>

<h4>Will submit (includes readonly field)</h4>
<form id="form" action="" method="POST">
    <input readonly  type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send">send</button>

<h4>Will submit (includes disabled field)</h4>
<form id="form" action="" method="POST">
    <input disabled  type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send3">send</button>

<h4>Works fine:</h4>
<form id="form2" action="" method="POST">
    <input type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send2">send</button>