Bug Tracker

#8083 closed bug (invalid)

Opened January 28, 2011 01:53PM UTC

Closed January 28, 2011 11:39PM UTC

Last modified March 13, 2012 07:16PM UTC

IE select tag not firing change vent

Reported by: josepaulino@gmail.com Owned by:
Priority: low Milestone: 1.next
Component: event Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

When you have a select tag with size > 1 Internet Explorer(I only could test with IE8) does not fire the change event when you change a selection by using the up/down arrows. Firefox and Chrome do.

There is a jsfiddle to show the behavior: http://jsfiddle.net/At8Ht/2

To reproduce:

1. Click into the select box

2. Press the up/down arrow

All browsers will fire the change event if you click an option. IE will not fire if you press the arrows.

My current workaround is to do this:

$("#selector").bind('change keyup',function() {});

There's probably a better way :)

Attachments (0)
Change History (3)

Changed January 28, 2011 02:09PM UTC by josepaulino@gmail.com comment:1

For some reason I mispelled event, please fix

Changed January 28, 2011 08:58PM UTC by rjgotten comment:2

Change the select tag's selection using the up/down arrow keys and then tab away from the control or click outside it to make it lose focus. IE will fire the change event.

This is according to the conditions of the DOM Lvl 2 specification: "The change event occurs when a control loses the input focus and its value has been modified since gaining focus."

In DOM Lvl 3 the event has been dropped. Instead it is described in the HTML5 specification, where similar behaviour is defined: a change event should only be fired on an explicit commit action and as part of the unfocusing behaviour.

IE gets this right as well: try using the up/down keys to change the value and then press the enter key for the explicit commit action. IE will fire the change event correctly...

tl;dr: All the other browsers are getting this one wrong. IE gets it right.

Changed January 28, 2011 11:39PM UTC by jitter comment:3

component: unfiled → event
priority: undecided → low
resolution: → invalid
status: new → closed

As detailed by rjgotten this works as expected. Fixing when the change event fires cross-browser isn't possible without adding an unjustifiable amount of code.