jQuery Inputmask 5.0.6-beta.15 does not work with wkhtmltopdf (QtWeb Browser)

[subarachnid]

This Plugin does not work with the QtWeb Browser (http://www.qtweb.net/) which is used by the HTML-to-PDF conversion Software wkhtmltopdf (https://wkhtmltopdf.org/).

Here is a basic test using a 'numeric'-type Inputmask:

<input type="text" data-inputmask="'alias' : 'float'" value="1000000,56">

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6-beta.15/jquery.inputmask.js"></script>
<script>
var aliases = {
	float: {
		alias: 'numeric',
		groupSeparator: '.',
		rightAlign: false,
		removeMaskOnSubmit: true,
		autoUnmask: true,
		radixPoint: ',',
		digits: 2,
		digitsOptional: true,
	}
};

Inputmask.extendAliases(aliases);

$('[data-inputmask]').inputmask();
</script>

• Describe the bug:

The mask seems to be applied correctly in all browsers (IE included) except for QtWeb.

• OS: Windows 10
• Browser: Chrome / QtWeb
• Inputmask version: Inputmask 5.0.6-beta.15

[RobinHerbots]

@subarachnid ,

wkhtmltopdf uses a very old version of webkit (qtweb) which probaly does not support the features used. This should be solable by using polyfills.

I will need to install the qtweb browser to see what is missing.

[subarachnid]

@RobinHerbots I think you are right, but the strange thing is that QtWeb does not show any JavaScript errors in its developer console. The one thing that I know of is that Function.prototype.bind is not available in QtWeb, but even when I add a polyfill for that the problem still occurs. Thank you very much for your efforts!

[unimedmt]

Same problem here! Is there any workaround? does downgrading inputmask version work?

Update: Tested version 5.0.0 and it works

[subarachnid]

Hello @RobinHerbots, @unimedmt

after about 20 hours of debugging in QtWeb I found out what the problem is.

QtWeb's JS-Engine does not guarantee an ascending iteration order for numerical object keys when using for in.

In positioning.js you have:

function getLastValidPosition(closestTo, strict, validPositions) {

    ...

    for (var posNdx in valids) {
        var psNdx = parseInt(posNdx);
        if (valids[psNdx] && (strict || valids[psNdx].generatedInput !== true)) {
            if (psNdx <= closestTo) before = psNdx;
            if (psNdx >= closestTo) after = psNdx;
        }
    }

where valids is an object like {"0": ..., "1": ..., "2": ...}. This will not work in QtWeb - the order of keys seems to be completely random.

I instead solved it like this (quite ugly but it works):

// create array of sorted object keys first, then iterate:
var validsKeys = Object.keys(valids)
    .map(function(x) { return parseInt(x, 10); })
    .sort(function(a, b) { return a - b; });

for (var i = 0; i < validsKeys.length; i++) {
    var psNdx = validsKeys[i]
    if (valids[psNdx] && (strict || valids[psNdx].generatedInput !== true)) {
	if (psNdx <= closestTo) before = psNdx;
	if (psNdx >= closestTo) after = psNdx;
    }
}

Maybe you can incorporate a fix for the next release?

[RobinHerbots]

Thanks for the investigation and dedication!! I will definitely have a look at it and incorporate a fix in the next release.

Best regards Robin

[RobinHerbots]

@subarachnid ,

Can you have a try with the latest beta.

Thx, Robin

[subarachnid]

Hi @RobinHerbots, thanks so much for fixing the issue. I am 100% confident that it'll work now that you refactored to code to use an array.

Unfortunately QtWeb now shows a new error regarding some regex in the dev-console when using the lastest beta:

var a = e.match(new RegExp("(?<p1>.)\\[(?<p2>[^\\]]*)\\]", "g"));

Could you maybe have another look at this?

[RobinHerbots]

#2619

[RobinHerbots]

@subarachnid , I removed the named capture group from the regex,. Hopefully this will work in qtweb.