Monzo.me Chrome decimal point on num pad


(Thomas Welton) #1

Trying to type 1.01 into the amount field using the decimal point on the numpad of my Apple external keyboard will cause the field to shake and throw a validation error.

Using the fullstop works.
Also using the decimal place key and fullstop key on Safari works


(Ben Green) #2

I can confirm this too. Using Chrome on Ubuntu with a cheap “Cherry” brand keyboard. Number pad works fine elsewhere.

My guess is there’s a keydown/keypress event (for the purpose of JavaScript validation to prevent typing too many decimal places or points typing a value higher than £100, etc), but isn’t listening for events on the number pad keys… Doh! :confounded:


(Thomas Welton) #3

Yeah, think it’s the input field validation. It’s using an input type “tel” with the validation pattern "\d*"
Don’t think it’s due to the fact that the decial place and the period have different char codes because both Chrome and Safari report these using the same values


(Ben Green) #4

Not sure what the reasoning for using a “tel” input field for inputting a currency value would be. It’s never gonna be a telephone number value :thinking:


( surohpotsirhC) #5

Speak for yourself! I’m often transferring £2076014444 around…


(Ben Green) #6

Mine is returning:

  • 110 for number pad . / del key and 190 for . / > key
  • 101 for number pad 5 key and 49 for 5 / % key

For a minute I thought I might have a non standard UK keyboard character map, like US, but nope it’s set to UK English.


( surohpotsirhC) #7

I’m unable to use my keypad at all. Standard keyboard attached to a Win7 PC browsing in Chrome.


(Andrew Schofield) #8

The problem is that the js being used to process the input is using String.fromCharCode() incorrectly.

The key presses are intercepted as keyup and keydown events which return a keycode which doesn’t map to a charcode. You cannot pass a keycode to fromCharCode() and expect it to work properly.

For example the numpad 5 gets turned into the string “e” with the above function. A decimal point -> “n”.
As a further example of this being incorrect, the key “e” is actually turned into the string “E” by this function.

The validation logic probably needs to be changed to hook into the keypress event, although some extra logic may be required to cancel the event.

@daniel.cannon this is in AmountSelector.js btw.


(Daniel Cannon) #9

Thanks! We will get this fixed right away.


(Daniel Cannon) #10

This should now be fixed now, I have tested on a couple of different computers and keyboard layouts but let me know if you are still having issues. Thanks agains for reporting the bug!


(Ben Green) #11

Yup, looks fixed to me :smiley: