Generate a FocusEvent (not Event) for focus-related events (#272)

* chore: add missing changelog entries

* Generate a FocusEvent (not Event) for focus-related events

* chore: add changelog

---------

Co-authored-by: Dmitry Vorotilin <d.vorotilin@gmail.com>

Author: davidrunger

CHANGELOG.md

@@ -20,6 +20,7 @@
 - Treat non-summary descendants of a closed `<details>` element as non-visible [#317]
 - `switch_to_window` sends `Target.activateTarget` so Chrome reactivates the window's renderer immediately instead of leaving it backgrounded, which could stall the next input command for several seconds [#321]
 - `Node#set` fires `input` and `change` events for a `color` input, since its value can only be set via JavaScript and never gets them naturally [#229]
+- Generate a `FocusEvent` (not a generic `Event`) for focus-related events (`blur`, `focus`, `focusin`, `focusout`), matching real browser behavior [#272]
 
 ### Removed
 

lib/capybara/cuprite/javascripts/index.js

@@ -464,7 +464,7 @@ class Cuprite {
         options["button"] || 0, null
       )
     } else if (EVENTS.FOCUS.indexOf(name) != -1) {
-      event = this.obtainEvent(name);
+      event = new FocusEvent(name, { bubbles: true, cancelable: true });
     } else if (EVENTS.FORM.indexOf(name) != -1) {
       event = this.obtainEvent(name);
     } else {

spec/features/session_spec.rb

@@ -227,11 +227,11 @@
         end
 
         it "fires the focus event" do
-          expect(@session.find(:css, "#changes_on_focus").text).to eq("Focus")
+          expect(@session.find(:css, "#changes_on_focus").text).to eq("Focus (FocusEvent)")
         end
 
         it "fires the blur event" do
-          expect(@session.find(:css, "#changes_on_blur").text).to eq("Blur")
+          expect(@session.find(:css, "#changes_on_blur").text).to eq("Blur (FocusEvent)")
         end
 
         it "fires the keydown event before the value is updated" do

spec/support/public/test.js

@@ -28,10 +28,10 @@ $(function() {
       $("#changes_on_keypress").text(increment)
     })
     .focus(function(event) {
-      $("#changes_on_focus").text("Focus")
+      $("#changes_on_focus").text(`Focus (${event.originalEvent.constructor.name})`)
     })
-    .blur(function() {
-      $("#changes_on_blur").text("Blur")
+    .blur(function(event) {
+      $("#changes_on_blur").text(`Blur (${event.originalEvent.constructor.name})`)
     })
 
   $("#change_me_color")