iOS 7 safari possible javascript/dojo trim bug

Question

Since the launch of iOS 7 we are getting orders through that have one character missing from the end of inputted data.

For example, if I enter Tanveer b Bal into the name field, it would return Tanveer b Ba. See screenshot below:

I believe the bug may be due to a trim filter we use on inputs to remove whitespace. We use the dojo/_base/lang trim function: https://github.com/dojo/dojo/blob/1.9/_base/lang.js#L510

String.prototype.trim ? function(str){ return str.trim(); } : function(str){ return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); }

Has anyone else experienced this issue?

Instructions to reproduce

1. Visit http://demo.zoopcommerce.com
2. Add to cart
3. Checkout
4. Enter email address and name then click next
5. The email address may now be missing the last character

UPDATE:

I created a trim tester here: http://jsfiddle.net/QJFBL/embedded/result/ but it seems to work fine on iOS 7. (Created another one with more of my dependencies: http://jsfiddle.net/qmKvZ/8/)

I also tried my implementation on an iOS 7 VM on http://crossbrowsertesting.com/ and again, it worked.

UPDATE 2: http://www.browserstack.com/ release an iOS7 VM today. I've tried my checkout with mixed results. Sometimes the bug happens and sometimes not. However, the bug still doesn't appear at all on a simple stripped back version http://jsfiddle.net/qmKvZ/9/embedded/result/, which makes me think there may be a deeper issue?

Answer 1

I can't 100% confirm why this is happening on the iOS side, but I can confirm a fix.

From what I can tell (with a very limited ability to debug), when autocomplete displays over an input, it does not propagate the last keypress event. Since dijit only watches keydown, keypress, paste, cut, input, compositionend events, the last character of an input can sometimes be missed.

To fix this bug, amend this line: https://github.com/dojo/dijit/blob/1.9/form/_TextBoxMixin.js#L347 from:

this.own(on(this.textbox, "keydown, keypress, paste, cut, input, compositionend", lang.hitch(this, handleEvent)));

to

this.own(on(this.textbox, "keydown, keypress, keyup, paste, cut, input, compositionend", lang.hitch(this, handleEvent)));

Basically you are just adding the keyup event. Be sure not to handle it in a similar way it handles keypress and keydown eg. https://github.com/dojo/dijit/blob/1.9/form/_TextBoxMixin.js#L238

I will submit a bug fix / issue to the dojo team as well.

Answer 2

I see the same problem on a non-dojo app. It seems like something about the keypress / keydown/ keyup handlers changed in iOS7 because the code works in iOS6 but gets trimmed in iOS7