Skip to content

Commit

Permalink
Fire input and change event on set for color input
Browse files Browse the repository at this point in the history
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#229
  • Loading branch information
asilano committed Apr 17, 2023
1 parent c7dc979 commit b44f8fc
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 0 deletions.
2 changes: 2 additions & 0 deletions lib/capybara/cuprite/node.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 12 additions & 0 deletions spec/features/session_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions spec/support/public/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down

0 comments on commit b44f8fc

Please sign in to comment.