Trigger 'input' events before 'change' events

coffee/chosen.jquery.coffee

@@ -512,4 +512,5 @@ class Chosen extends AbstractChosen
       @search_field.css({'width': w + 'px'})
 
   trigger_form_field_change: (extra) ->
+    @form_field_jq.trigger "input", extra
     @form_field_jq.trigger "change", extra

coffee/chosen.proto.coffee

@@ -506,6 +506,7 @@ class @Chosen extends AbstractChosen
       @search_field.setStyle({'width': w + 'px'})
 
   trigger_form_field_change:  ->
+    triggerHtmlEvent @form_field, 'input'
     triggerHtmlEvent @form_field, 'change'
 
   triggerHtmlEvent = (element, eventType) ->

spec/jquery/events.spec.coffee

@@ -0,0 +1,30 @@
+describe "Events", ->
+  it "chosen should fire the right events", ->
+    tmpl = "
+      <select data-placeholder='Choose a Country...'>
+        <option value=''></option>
+        <option value='United States'>United States</option>
+        <option value='United Kingdom'>United Kingdom</option>
+        <option value='Afghanistan'>Afghanistan</option>
+      </select>
+    "
+    div = $("<div>").html(tmpl)
+    select = div.find("select")
+    expect(select.size()).toBe(1)
+    select.chosen()
+    # very simple check that the necessary elements have been created
+    ["container", "container-single", "single", "default"].forEach (clazz)->
+      el = div.find(".chosen-#{clazz}")
+      expect(el.size()).toBe(1)
+
+    # test a few interactions
+    event_sequence = []
+    div.on 'input change', (evt) -> event_sequence.push evt.type
+
+    container = div.find(".chosen-container")
+    container.trigger("mousedown") # open the drop
+    expect(container.hasClass("chosen-container-active")).toBe true
+    #select an item
+    container.find(".active-result").last().trigger("mouseup")
+
+    expect(event_sequence).toEqual ['input', 'change']

spec/proto/events.spec.coffee

@@ -0,0 +1,32 @@
+describe "Events", ->
+  it "chosen should fire the right events", ->
+    tmpl = "
+      <select data-placeholder='Choose a Country...'>
+        <option value=''></option>
+        <option value='United States'>United States</option>
+        <option value='United Kingdom'>United Kingdom</option>
+        <option value='Afghanistan'>Afghanistan</option>
+      </select>
+    "
+
+    div = new Element("div")
+    document.body.insert(div)
+
+    div.update(tmpl)
+    select = div.down("select")
+    expect(select).toBeDefined()
+    new Chosen(select)
+
+    event_sequence = []
+    document.addEventListener 'input', -> event_sequence.push 'input'
+    document.addEventListener 'change', -> event_sequence.push 'change'
+
+    container = div.down(".chosen-container")
+    container.simulate("mousedown") # open the drop
+    expect(container.hasClassName("chosen-container-active")).toBe true
+
+    #select an item
+    container.select(".active-result").last().simulate("mouseup")
+
+    expect(event_sequence).toEqual ['input', 'change']
+    div.remove()