fix(node): fire input event when selecting an option

CHANGELOG.md

@@ -11,6 +11,7 @@
 - `Node#visible?` reported an open popover or modal dialog as hidden when an ancestor had `opacity: 0` [#328]
 - `Driver#window_handles` listed the web workers a page spawned as windows, so `window_opened_by` raised
   `opened 2 windows instead of 1` [#326]
+- `Node#select_option` and `Node#unselect_option` didn't fire the `input` event on the select [#223]
 
 ### Removed
 

lib/capybara/cuprite/javascripts/index.js

@@ -429,13 +429,14 @@ class Cuprite {
     } else if (value == false && !node.parentNode.multiple) {
       return false;
     } else {
-      let parentNode = node.parentNode;
-      this.trigger(parentNode, "focus");
+      let selectNode = node.closest("select");
+      this.trigger(selectNode, "focus");
 
       node.selected = value;
+      selectNode.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
       this.changed(node);
 
-      this.trigger(parentNode, "blur");
+      this.trigger(selectNode, "blur");
       return true;
     }
   }

spec/features/session_spec.rb

@@ -155,6 +155,11 @@
           expect(@session.find(:css, "#changes").text).to eq("Firefox")
         end
 
+        it "fires the input event before the change event" do
+          expect(@session.find(:css, "#changes_on_input").text).to eq("Firefox")
+          expect(@session.find(:css, "#select_events").text).to eq("input change")
+        end
+
         it "fires the blur event" do
           expect(@session.find(:css, "#changes_on_blur").text).to eq("Firefox")
         end
@@ -177,6 +182,11 @@
           expect(@session.find(:css, "#changes").text).to eq("Safari")
         end
 
+        it "fires the input event before the change event" do
+          expect(@session.find(:css, "#changes_on_input").text).to eq("Safari")
+          expect(@session.find(:css, "#select_events").text).to eq("input change")
+        end
+
         it "fires the blur event" do
           expect(@session.find(:css, "#changes_on_blur").text).to eq("Safari")
         end

spec/support/public/test.js

@@ -46,6 +46,11 @@ $(function() {
     .change(function(event) {
       $("#changes").text($(this).val())
       $("#target_on_select").text(event.target.nodeName)
+      $("#select_events").append(" change")
+    })
+    .bind("input", function() {
+      $("#changes_on_input").text($(this).val())
+      $("#select_events").append(" input")
     })
     .focus(function() {
       $("#changes_on_focus").text($(this).val())

spec/support/views/with_js.erb

@@ -47,6 +47,7 @@
     <p id="changes_on_blur"></p>
     <p id="changes_on_keypress"></p>
     <p id="target_on_select"></p>
+    <p id="select_events"></p>
     <p id="value_on_keydown"></p>
     <p id="value_on_keyup"></p>
     <div id="off-the-left"><a href="/" id="foo">O hai</a></div>