IE 9 & 10 events not firing (consistently) - javascript

I am developing a web application. This application due to requirement contains a table with 500+ rows (unpaged). The application is very interactive and so we're using KO behind the scenes.
That said I am noticing that occasionally tabbing on an input text box, does not take you to the nearest text box, instead it takes you to the first input text box on the page. When this happens a couple of things also happen:
The blur event does not trigger.
The focusout event also does not trigger. I have had to work around the issue by detecting mouse click and fire the events off manually using jQuery.
Unobtrusive validation will not work.
View model is not bound ie. changes on the input box is not reflected on the KO view model.
The issue is intermittent, I cannot necessarily reproduce it consistently, but it is happening frequently - and considering money is involved in this application I need this to work 100%.
Also testing the same application on Chrome and Firefox works perfectly. No intermittent issue as detected on IE9 and 10. Is there a known browser bug around this issue? Or am I just missing something?

Related

How do I locate the function that is stealing DOM focus?

I'm trying to debug the integration between my app and Stripe's Elements component library. Everything works fine in sandbox mode, but we ran into a problem on production in the 3D Secure authentication process. This involves loading an iframe, into our app, that contains a form from the credit card's issuer (usually via a technology partner, like Arcot).
The form loads correctly and its buttons are working as expected, but the element (for a SMS one time code) is not behaving. Every time I click on the input, something is immediately pushing the focus back to the element of the iframe. This makes it impossible to type anything in, since by the time I touch a key, the input is not in focus. For reference, it is possible to change the input's value using document.getElementById('enterPIN').value = '123456';
I'm not sure if my app is triggering focus() calls (I don't think so) or if it is some part of the iframe code or even Stripe's. Is there a good way to monitor DOM events and do a stack trace for the trigger of each one?
I tried two tactics. Neither gave an obvious answer, but they did point my search in the right direction.
I opened the Event Listeners panel (in the Elements tab of my browser's developer tools) and removed everything I could find, but it seems that this doesn't actually change the behavior of the page- focus kept being stolen away. Luckily, I also noticed some listeners that were defined by the Material UI library.
I used monitorEvents() to get a few more details, but the src & target values were not much help and event.relatedTarget was always null.
In the end, I found this discussion and realized that my MUI Dialog component was stealing focus whenever I clicked on the iframe triggered by its content. This was easily fixed by adding the disableEnforceFocus attribute.

input type="date" not firing correct events on some versions of default Android-browser

I am developing a website for mobile devices using Angular.js, and have run into an issue with input type="date" on some default Android-browsers. On affected browsers, values set through the date-control are never bound to the model.
I have narrowed it down to the date picker interfering with the events fired by the input field. This JSBin showcases the issue: http://jsbin.com/riwutijene
(Note that the bound value is updated only on the blur-event because Mobile Safari would otherwise cause an update every time a dial is turned before the date picker is dismissed.)
What I expect is for the date selected via the upper date-element to appear below the field after confirming the value. This works as expected on most browser/device-combinations, but not on a very small number of handheld devices, such as an HTC One I use for testing. Unfortunately, the issue can only be reproduced on affected devices.
The problem seems to be a browser-bug that only happens because manufacturers are able to ship the native browser using beta-versions of WebKit. It does not seem to be directly connected to Angular.js, as the events fired by those “faulty” input elements are out of whack regardless (as seen on the bottom date field).
Have any of you run into this issue before, or know of a solid workaround?

Javascript events for selections on tablets

I'm currently trying to get rid of a problem within an application that is supposed to highlight selected textpassages in a document.
The application is working fine in desktop browsers but is currently having trouble with mobile versions because the browsers(IE 11 mobile) text-selection works differently.
The problem seems to be that the actual selection in the mobile version comes after the mouseup-event that is used to catch the selections. Because of this, the selections aren't updated properly until the next mouseup-event on the document and aren't updated at all if the next mouseup-event happens to take place outside of the document-area.
Right now I'm looking for something like an event that is triggered after the selection or an event that is triggered before a textpart is losing its selection.
So far I've tried most pointer- and touch-events (mostly variations like touchstart, -end, -leave, pointerdown, -out and -up). Further researches only led to selection-events for forms and input-fields which isn't what I'm looking for.
Are there any suggestions for events or workarounds that suit my problem?

Event to detect change of an HTML5 number control in Webkit/Chrome?

HTML5 gives us some new input elements to play with, such as <input type=number>. This renders (in Chrome) as a textbox with two cycle buttons inside the textbox, for incrementing and decrementing the numeric value inside the box.
For a personal hobby project, I'm using this control. However, I'm stuck with one issue:
Is there a way to detect the value being changed using a javascript event? I had expected the onChange event to fire, but no such luck. Also, onClick only triggers when the textbox content is clicked, not when the cycle buttons are clicked.
Any ideas? (apart from: hey, it's HTML5 Forms, don't expect anything to work yet!)
Edit: As mikerobi points out below, the onChange event does fire as soon as the element loses focus. Still not quite what I'm looking for, so other comments and suggestions are welcome!
Result of the bugreport: Won't Fix, because the input event is fired when those buttons are pressed. It's part of the HTML5 spec. So problem solved, thanks to mikerobi's sugestion to file the report.
The onChange event gets fired when when the box loses focus, but you probably already know that.
The HTML5 specifies that a number input should be a text box or spinner control, but the spec does not appear to have any guidelines for how a spinner should look or behave, leaving those decisions up to the browser vendors.
It appears that in the Mac Safari, the spin buttons do respond to click events, you might want to file a Chrome bug report, I suspect it was just an oversight.
$.click() works fine. If you click and hold, it doesn't until you release.

ANDROID WEBKIT: Select elements getting focus events, but not opening!

I have a series of select elements in a form on a mobile site. These select elements are inside a scrolling pane handled through JS and CSS3 transforms, so getting a touch/click/whatever event to register on the selects was enough of a pain in the first place. However, I'm now finding, on android only, that even though the selects are getting clicked, and are getting focus- they simply refuse to open. I'm 100% sure that the selects are getting their focus event (through debug), so honestly, I am completely stumped. Without the debug, there are no other focus/blur events on the selects. It works fine on iPhone... any ideas?
I've been banging my head against the wall with this same issue. It seems to be isolated to Android 2.1/2.2 (and maybe 2.0?). The selects work fine in Android 1.5/1.6. I even created a simple page that just changes the select's display style from none to block and the select still doesn't open consistently. Oddly, sometimes after page refresh it might work, then after another refresh it might be broken again. As you stated, focus and click/touch events do fire from the element, so I'm at a loss as to what the issue is.
Sometimes if I zoom the page I can get the select to open, but even then the value selected isn't represented in the select element on the page.
I submitted a bug report to the Android dev team, but even if it's fixed in future builds the problem will still exist in 2.1/2.2.
Anyone find a workaround for this yet?
//---- Update ------
If you use a webkit-transition to show/hide the element, attaching the following event to the element appears to fix the select inside of it:
.addEventListener("webkitTransitionEnd",function(e){
this.innerHTML = this.innerHTML;
},false);
I'm not entirely sure why this works, but re-writing the element to the DOM seems to help for some reason. Tested in Android 2.1/2.2 simulator, EVO4G and MyTouch.
I found the solution in this answer by a.meservy. Here is the answer, copied for everyone's convenience.
In this case the problem was actually caused by jQTouch. To fix it, just comment out these 4 lines in jqtouch.css
Under "body"
/*-webkit-perspective: 800;*/
/*-webkit-transform-style: preserve-3d;*/
Under "body > * "
/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/

Categories

Resources