Ensure focusin/focusout fires with .focus()/.blur()

lib/jsdom/living/helpers/focusing.js

@@ -65,13 +65,16 @@ exports.isFocusableAreaElement = elImpl => {
 
 // https://html.spec.whatwg.org/multipage/interaction.html#fire-a-focus-event plus the steps of
 // https://html.spec.whatwg.org/multipage/interaction.html#focus-update-steps that adjust Documents to Windows
-exports.fireFocusEventWithTargetAdjustment = (name, target, relatedTarget) => {
+// It's extended with the bubbles option to also handle focusin/focusout, which are "defined" in
+// https://w3c.github.io/uievents/#event-type-focusin. See https://github.com/whatwg/html/issues/3514.
+exports.fireFocusEventWithTargetAdjustment = (name, target, relatedTarget, { bubbles = false } = {}) => {
   if (target === null) {
     // E.g. firing blur with nothing previously focused.
     return;
   }
 
   const event = createAnEvent(name, target._globalObject, FocusEvent, {
+    bubbles,
     composed: true,
     relatedTarget,
     view: target._ownerDocument._defaultView,

lib/jsdom/living/nodes/HTMLOrSVGElement-impl.js

@@ -42,30 +42,43 @@ class HTMLOrSVGElementImpl {
     if (!focusing.isFocusableAreaElement(this)) {
       return;
     }
-
-    const previous = this._ownerDocument._lastFocusedElement;
+    const ownerDocument = this._ownerDocument;
+    const previous = ownerDocument._lastFocusedElement;
 
     if (previous === this) {
       return;
     }
 
-    focusing.fireFocusEventWithTargetAdjustment("blur", previous, this);
-    this._ownerDocument._lastFocusedElement = this;
-    focusing.fireFocusEventWithTargetAdjustment("focus", this, previous);
-
-    if (this._ownerDocument._defaultView._frameElement) {
-      this._ownerDocument._defaultView._frameElement.focus();
+    ownerDocument._lastFocusedElement = null;
+    if (previous) {
+      focusing.fireFocusEventWithTargetAdjustment("blur", previous, this);
+      focusing.fireFocusEventWithTargetAdjustment("focusout", previous, this, { bubbles: true });
+    } else {
+      const frameElement = ownerDocument._defaultView._frameElement;
+      if (frameElement) {
+        const frameLastFocusedElement = frameElement.ownerDocument._lastFocusedElement;
+        frameElement.ownerDocument._lastFocusedElement = null;
+        focusing.fireFocusEventWithTargetAdjustment("blur", frameLastFocusedElement, null);
+        focusing.fireFocusEventWithTargetAdjustment("focusout", frameLastFocusedElement, null, { bubbles: true });
+        frameElement.ownerDocument._lastFocusedElement = frameElement;
+      }
     }
+
+    ownerDocument._lastFocusedElement = this;
+    focusing.fireFocusEventWithTargetAdjustment("focus", this, previous);
+    focusing.fireFocusEventWithTargetAdjustment("focusin", this, previous, { bubbles: true });
   }
 
   blur() {
     if (this._ownerDocument._lastFocusedElement !== this || !focusing.isFocusableAreaElement(this)) {
       return;
     }
 
-    focusing.fireFocusEventWithTargetAdjustment("blur", this, this._ownerDocument);
     this._ownerDocument._lastFocusedElement = null;
+    focusing.fireFocusEventWithTargetAdjustment("blur", this, this._ownerDocument);
+    focusing.fireFocusEventWithTargetAdjustment("focusout", this, this._ownerDocument, { bubbles: true });
     focusing.fireFocusEventWithTargetAdjustment("focus", this._ownerDocument, this);
+    focusing.fireFocusEventWithTargetAdjustment("focusin", this._ownerDocument, this, { bubbles: true });
   }
 }
 

test/web-platform-tests/to-run.yaml

@@ -1088,7 +1088,8 @@ idlharness.window.html: [fail, Depends on fetch]
 legacy-domevents-tests/approved/ProcessingInstruction.DOMCharacterDataModified.html: [timeout, Mutation Events not implemented]
 legacy-domevents-tests/approved/domnodeinserted.html: [timeout, Mutation Events not implemented]
 mouse/**: [timeout, Uses testdriver.js]
-order-of-events/**: [timeout, Unknown]
+order-of-events/focus-events/focus-management-expectations.html: [timeout, Uses testdriver.js]
+order-of-events/mouse-events/*: [timeout, Unknown]
 
 ---
 

test/web-platform-tests/to-upstream/html/interaction/focus-managment/focusing-focused-noop.html

@@ -26,14 +26,24 @@
   input.addEventListener("blur", () => {
     handleBlurCallCount += 1;
   });
+  let handleFocusInCallCount = 0;
+  input.addEventListener("focusin", () => {
+    handleFocusInCallCount += 1;
+  });
+  let handleFocusOutCallCount = 0;
+  input.addEventListener("focusout", () => {
+    handleFocusOutCallCount += 1;
+  });
 
   container.appendChild(input);
 
   input.focus();
   document.activeElement.focus();
 
   assert_equals(handleBlurCallCount, 0);
+  assert_equals(handleFocusOutCallCount, 0);
   assert_equals(handleFocusCallCount, 1);
+  assert_equals(handleFocusInCallCount, 1);
 }, "focusing a focused element does not dispatch focus events");
   </script>
 </body>