Closed webcompat-bot closed 4 years ago
Thanks for the report! I'm able to reproduce the issue. After the 16th digit, weird things happen.
Tested with: Browser / Version: Firefox Nightly 68.2a1 (2019-09-07) Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)
Moving to Needsdiagnosis.
I can enter 1087846076850018
then 9
is transformed as a 8
<input
type="number"
data-test-id="ticket-number-input"
max-length="24"
number-filter=""
value.bind="ticketNumInput & validate"
class="au-target"
au-target-id="75">
define("check-my-ticket/ticket-number-form/ticket-number-form", [
"require",
"exports",
"aurelia-framework",
"aurelia-validation",
"services/tatts-configuration"
], function(e, t, n, r, o) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var a = (function() {
function e(e, t) {
(this.controller = e),
(this.tattsConfiguration = t),
(this.ticketNumInput = ""),
(this.exampleTicketUrl =
"/etc/designs/the-lott/components/content/check-my-ticket/clientlibs/assets/img--example-ticket@2x.png"),
(this.userAgent = navigator.userAgent);
var n = /^\d{2}\s*\d{6}\s*\d{5}\s*\d{3}\s*\d{6}\s*\d{2}$/;
r.ValidationRules.ensure(function(e) {
return e.ticketNumInput;
})
.required()
.withMessage("Please enter your entire ticket number")
.then()
.matches(n)
.withMessage("Please enter your entire ticket number")
.on(this),
(this.backgroundUrl = this.tattsConfiguration.getAemProperty(
"cmtImage",
this.exampleTicketUrl
));
}
return (
(e.prototype.checkTicket = function() {
return __awaiter(this, void 0, void 0, function() {
var e;
return __generator(this, function(t) {
switch (t.label) {
case 0:
return [4, this.controller.validate()];
case 1:
return (
t.sent(),
this.controller.errors.length
? [2]
: ((e = this.ticketNumInput.replace(/[^\d]/g, "")),
this.ticketNumberSubmitted({
ticketNum: e
}),
[2])
);
}
});
});
}),
(e.prototype.setTicketNum = function(e) {
this.ticketNumInput = e;
}),
Object.defineProperty(e.prototype, "useInputMask", {
get: function() {
return (
"undefined" == typeof navigator ||
!navigator.userAgent.match(/Android/i)
);
},
enumerable: !0,
configurable: !0
}),
__decorate(
[
n.bindable({
defaultBindingMode: n.bindingMode.oneWay
}),
__metadata("design:type", String)
],
e.prototype,
"errorMessage",
void 0
),
__decorate(
[
n.bindable({
defaultBindingMode: n.bindingMode.oneWay
}),
__metadata("design:type", Function)
],
e.prototype,
"ticketNumberSubmitted",
void 0
),
__decorate(
[
n.computedFrom("userAgent"),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
],
e.prototype,
"useInputMask",
null
),
(e = __decorate(
[
n.customElement("ticket-number-form"),
n.autoinject,
__metadata("design:paramtypes", [
r.ValidationController,
o.TattsConfiguration
])
],
e
))
);
})();
t.TicketNumberForm = a;
});
They defined the pattern of the number on this line.
var n = /^\d{2}\s*\d{6}\s*\d{5}\s*\d{3}\s*\d{6}\s*\d{2}$/;
which is the way it appears on desktop.
while in chrome android
It can grok 16 integer and the 17th is being broken.
1234567890123456
if I add 0
I get a 0
1234567890123456
if I add 1
I get a 0
1234567890123456
if I add 2
I get a 2
1234567890123456
if I add 3
I get a 4
1234567890123456
if I add 4
I get a 4
1234567890123456
if I add 5
I get a 4
1234567890123456
if I add 6
I get a 6
1234567890123456
if I add 7
I get a 8
1234567890123456
if I add 8
I get a 8
1234567890123456
if I add 9
I get a 8
There's a pattern with a difference in between odd and even numbers, which always return an even number.
if I remove the value.bind
the issue stops.
The value is changed by
e.prototype.onInputEvent = function (e) {
var t = e.target;
return t.value = t.value.replace(this.re, ''),
!0
},
this.re
in this code is: /[0-9]/g
and t.value is 12345678901234567
and still when it is executed we get a 8 instead of the 7.
Trying to take a fresh start to this.
1087846076850018
.9
e.prototype.notify = function () {
var e = this.oldValue,
t = this.getValue();
this.callSubscribers(t, e),
this.oldValue = t
},
The UI shows 10878460768500189
this.oldValue
"1087846076850018"
return e.prototype.getValue = function () {
return this.element[this.propertyName]
},
this.propertyName
= "value"
this.element[this.propertyName]
= "10878460768500189"
Then it goes through this… how to say… code.
function M(e, t) {
…
}
e = 10878460768500189
t = 1087846076850018
then
e.prototype.call = function(e, t, n) {
…
};
Basically there is no issue, until I reach
e.prototype.onInputEvent = function (e) {
var t = e.target;
return t.value = t.value.replace(this.re, ''),
!0
},
even inside on the console, this is working.
But by the time I reach the closing brace. The value has changed.
I don't get it.
Ooooh. It's even worse than. If I query the input element… the value is the right one.
"10878460768500189"
but the displayed value is different.
ah when the number is 16 digits long this is ok when the number is 17 digits long this is not ok.
the input is type number but the regex is trying to replace matching numbers by an empty string.
Is it a case where it confuses input. I will open a core issue.
<input
type="number"
data-test-id="ticket-number-input"
max-length="24"
number-filter=""
value.bind="ticketNumInput & validate"
class="au-target"
au-target-id="76">
Another funny thing. on Chrome Canary currently I get ERR_HTTP2_PROTOCOL_ERROR
And can't access the site at all.
I'm about to open a bug on Bugzilla. I would love to be sure I'm not missing anything.
this is working now on fenix preview
URL: https://www.thelott.com/results/check-my-ticket
Browser / Version: Firefox Mobile 68.0 Operating System: Android Tested Another Browser: Yes
Problem type: Site is not usable Description: Unable to enter the full number correctly, diferent numbers shown ho those typed Steps to Reproduce: Unable to enter the full number correctly, after 17 digits entered the numbers shown are not the numbers typed.
Example number 010878460768500189587665
Browser Configuration
Console Messages:
Submitted in the name of
@IronJunkie
From webcompat.com with ❤️