I am trying to use the jQuery UI 1.9 spinner for the quantity field in a shopping cart application, and have run into a problem affecting IE6 – 9 (and maybe 10), but not Firefox or Chrome.
The issue is that the code I have in the change event of the spinner definition does not fire in IE when the spinner is spun only once, without focus first being applied to the input field itself i.e. just click on either the up/down spin button on an unselected spinner and then click off the spinner and no change event fires.
EDIT – I’ve created a jsfiddle for this to help illustrate the problem. The problem occurs in IE6 – 9, I haven’t tried in 10.
In IE make sure the focus is not on the spinner input field and just click the spinner add arrow once, then click elsewhere on the page. No alert is displayed. Interestingly, the problem does not occur if you put focus into the input field first i.e. click the input field, then the spinner arrow, then click away.
The jsfiddle does show that the change event is not firing, but as it’s running the source from the jQuery Github page, can’t show the extra focus event firing inside the spinner’s internal workings in IE.
To make sure it wasn’t anything I’d done, I took a copy of all the demo files in the current 1.9m7 milestone release and reproduced with that. To confirm the issue I added a few console log messages to see what was happening.
In IE9 an extra focus event fires in the _events focus (in jquery.ui.spinner.js).
This has the effect of updating this.previous twice, so the first time it is correct (as in the other browsers), but the second focus causes this.previous to be set to the same value as the current value, so when the blur event fires and it checks if this.previous !== this.element.val() they are the same and the change doesn’t fire.
This problem does not occur if you spin more than once, as the extra focus doesn’t fire so the previous value remains correct. Can anyone help me identify where the extra focus is being triggered, or if there’s a workaround?
I need a resolution to this for a project at work, and really don’t want to have to remove the spinner at this stage. Given jQuery’s aim of cross-browser compatability, I find it hard to believe there is such a fundamental issue affecting cross-browser compatability for a widget that’s been around (granted, not yet part of the current release) for a few years. How has nobody noticed before?
I submitted a bug report to the jQuery team and it was promptly fixed. This question is therefore no longer an issue.