Merge pull request harvesthq#2704 from marcandre/bye_bye_simulate

Bye bye simulate

coffee/chosen.jquery.coffee

@@ -324,7 +324,7 @@ class Chosen extends AbstractChosen
     this.single_set_selected_text()
     this.show_search_field_default()
     this.results_reset_cleanup()
-    @form_field_jq.trigger "change"
+    this.trigger_form_field_change()
     this.results_hide() if @active_field
 
   results_reset_cleanup: ->
@@ -362,7 +362,7 @@ class Chosen extends AbstractChosen
       this.results_hide() unless @is_multiple && (!@hide_results_on_select || (evt.metaKey or evt.ctrlKey))
       this.show_search_field_default()
 
-      @form_field_jq.trigger "change", {'selected': @form_field.options[item.options_index].value} if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
+      this.trigger_form_field_change selected: @form_field.options[item.options_index].value  if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
       @current_selectedIndex = @form_field.selectedIndex
 
       evt.preventDefault()
@@ -390,7 +390,7 @@ class Chosen extends AbstractChosen
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
-      @form_field_jq.trigger "change", {deselected: @form_field.options[result_data.options_index].value}
+      this.trigger_form_field_change deselected: @form_field.options[result_data.options_index].value
       this.search_field_scale()
 
       return true
@@ -510,3 +510,7 @@ class Chosen extends AbstractChosen
         w = f_width - 10
 
       @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

@@ -315,7 +315,7 @@ class @Chosen extends AbstractChosen
     this.single_set_selected_text()
     this.show_search_field_default()
     this.results_reset_cleanup()
-    @form_field.simulate("change") if typeof Event.simulate is 'function'
+    this.trigger_form_field_change()
     this.results_hide() if @active_field
 
   results_reset_cleanup: ->
@@ -353,7 +353,7 @@ class @Chosen extends AbstractChosen
       this.results_hide() unless @is_multiple && (!@hide_results_on_select || (evt.metaKey or evt.ctrlKey))
       this.show_search_field_default()
 
-      @form_field.simulate("change") if typeof Event.simulate is 'function' && (@is_multiple || @form_field.selectedIndex != @current_selectedIndex)
+      this.trigger_form_field_change() if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
       @current_selectedIndex = @form_field.selectedIndex
 
       evt.preventDefault()
@@ -381,7 +381,7 @@ class @Chosen extends AbstractChosen
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
-      @form_field.simulate("change") if typeof Event.simulate is 'function'
+      this.trigger_form_field_change()
       this.search_field_scale()
       return true
     else
@@ -504,3 +504,18 @@ class @Chosen extends AbstractChosen
         w = f_width - 10
 
       @search_field.setStyle({'width': w + 'px'})
+
+  trigger_form_field_change:  ->
+    triggerHtmlEvent @form_field, 'input'
+    triggerHtmlEvent @form_field, 'change'
+
+  triggerHtmlEvent = (element, eventType) ->
+    if element.dispatchEvent  # Modern way:
+      try
+        evt = new Event(eventType, bubbles: true, cancelable: true)
+      catch
+        evt = document.createEvent('HTMLEvents')
+        evt.initEvent(eventType, true, true);
+      element.dispatchEvent(evt)
+    else # Old IE:
+      element.fireEvent("on#{eventType}", document.createEventObject());

package.json

@@ -29,7 +29,7 @@
     "grunt-contrib-coffee": "~0.6.4",
     "grunt-contrib-concat": "~0.1.3",
     "grunt-contrib-cssmin": "~0.6.1",
-    "grunt-contrib-jasmine": "~0.5.1",
+    "grunt-contrib-jasmine": "~1.0.3",
     "grunt-contrib-uglify": "~0.2.0",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-dom-munger": "~2.0.1",

public/options.html

@@ -228,7 +228,7 @@ <h3>Example:</h3>
           <td>change</td>
           <td>
             <p>Chosen triggers the standard DOM event whenever a selection is made (it also sends a <code class="language-javascript">selected</code> or <code class="language-javascript">deselected</code> parameter that tells you which option was changed).</p>
-            <p><strong>Note:</strong> in order to use change in the Prototype version, you have to include the <a href="https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js">Event.simulate</a> class. The selected and deselected parameters are not available for Prototype.</p>
+            <p><strong>Note:</strong> The selected and deselected parameters are not available for Prototype.</p>
           </td>
         </tr>
         <tr>

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()