From b44f8fcda020c8c215bb681a9ca7028aa55eea2d Mon Sep 17 00:00:00 2001
From: Chris Howlett <chris.howlett@freeagent.com>
Date: Mon, 17 Apr 2023 17:02:07 +0100
Subject: [PATCH] Fire input and change event on set for color input

Since a color input has to have its value set directly via javascript
(presumably because of the difficulty of interacting with the browser's
colour picker), the `change` and `input` events don't automatically
happen. This PR fires them manually.

Fixes rubycdp/cuprite#229
---
 lib/capybara/cuprite/node.rb  |  2 ++
 spec/features/session_spec.rb | 12 ++++++++++++
 spec/support/public/test.js   |  8 ++++++++
 3 files changed, 22 insertions(+)

diff --git a/lib/capybara/cuprite/node.rb b/lib/capybara/cuprite/node.rb
index 3efab57c..a9c274ce 100644
--- a/lib/capybara/cuprite/node.rb
+++ b/lib/capybara/cuprite/node.rb
@@ -103,6 +103,8 @@ def set(value, options = {})
             command(:select_file, files)
           when "color"
             node.evaluate("this.setAttribute('value', '#{value}')")
+            node.evaluate("this.dispatchEvent(new InputEvent('input'))")
+            node.evaluate("this.dispatchEvent(new Event('change', { bubbles: true }))")
           else
             command(:set, value.to_s)
           end
diff --git a/spec/features/session_spec.rb b/spec/features/session_spec.rb
index 7084cb92..5fea7892 100644
--- a/spec/features/session_spec.rb
+++ b/spec/features/session_spec.rb
@@ -245,6 +245,18 @@
         element.set("#ddeeff")
         expect(element.value).to eq("#ddeeff")
       end
+
+      it "fires the change event for a color input" do
+        element = @session.find(:css, "#change_me_color")
+        element.set("#ddeeff")
+        expect(@session.find(:css, "#changes").text).to eq("#ddeeff")
+      end
+
+      it "fires the input event for a color input" do
+        element = @session.find(:css, "#change_me_color")
+        element.set("#ddeeff")
+        expect(@session.find(:css, "#changes_on_input").text).to eq("#ddeeff")
+      end
     end
 
     describe "Node#visible" do
diff --git a/spec/support/public/test.js b/spec/support/public/test.js
index 7b11808e..6dc31950 100644
--- a/spec/support/public/test.js
+++ b/spec/support/public/test.js
@@ -34,6 +34,14 @@ $(function() {
       $("#changes_on_blur").text("Blur")
     })
 
+  $("#change_me_color")
+    .change(function(event) {
+      $("#changes").text($(this).val())
+    })
+    .bind("input", function(event) {
+      $("#changes_on_input").text($(this).val())
+    })
+
   $("#browser")
     .change(function(event) {
       $("#changes").text($(this).val())