Fix clicking labels for delegatesFocus form associated custom elements

I don't really think this behavior is well specced, but I think this behavior makes sense and it's the same as Firefox. Safari doesn't support form-associated custom elements yet. Fixed: 1300587 Change-Id: Ica4c91c7178c6c4800c3925745d1705d09e30e16 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3501331 Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#983491}
chromium · Mar 21, 2022 · 62daabb · 62daabb
1 parent 7705d2a
commit 62daabb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/third_party/blink/renderer/core/input/mouse_event_manager.cc b/third_party/blink/renderer/core/input/mouse_event_manager.cc
@@ -33,6 +33,7 @@
 #include "third_party/blink/renderer/core/frame/local_frame_view.h"
 #include "third_party/blink/renderer/core/frame/settings.h"
 #include "third_party/blink/renderer/core/html/canvas/html_canvas_element.h"
+#include "third_party/blink/renderer/core/html/forms/html_label_element.h"
 #include "third_party/blink/renderer/core/html/html_image_element.h"
 #include "third_party/blink/renderer/core/input/event_handler.h"
 #include "third_party/blink/renderer/core/input/event_handling_util.h"
@@ -557,6 +558,16 @@ WebInputEventResult MouseEventManager::HandleMouseFocus(
   frame_->GetDocument()->UpdateStyleAndLayout(DocumentUpdateReason::kFocus);
 
   Element* element = element_under_mouse_;
+
+  // When clicking on a <label> for a form associated custom element with
+  // delegatesFocus, we should focus the custom element's focus delegate.
+  if (auto* label = DynamicTo<HTMLLabelElement>(element)) {
+    auto* control = label->control();
+    if (control && control->DelegatesFocus()) {
+      element = control;
+    }
+  }
+
   for (; element; element = element->ParentOrShadowHostElement()) {
     if (element->IsFocusable() && element->IsFocusedElementInDocument())
       return WebInputEventResult::kNotHandled;

diff --git a/...ty/blink/web_tests/external/wpt/custom-elements/form-associated/label-delegatesFocus.html b/...ty/blink/web_tests/external/wpt/custom-elements/form-associated/label-delegatesFocus.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1300587">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<form>
+  <label for=custom>label</label>
+  <my-custom-element id=custom></my-custom-element>
+</form>
+
+<script>
+class MyCustomElement extends HTMLElement {
+  static formAssociated = true;
+  constructor() {
+    super();
+    const root = this.attachShadow({
+      delegatesFocus: true,
+      mode: 'open'
+    });
+    root.appendChild(document.createElement('input'));
+  }
+};
+customElements.define('my-custom-element', MyCustomElement);
+
+window.onload = () => {
+  promise_test(async () => {
+    const label = document.querySelector('label');
+    const customElement = document.querySelector('my-custom-element');
+    const input = customElement.shadowRoot.querySelector('input');
+    await test_driver.click(label);
+    assert_equals(document.activeElement, customElement);
+    assert_equals(customElement.shadowRoot.activeElement, input);
+  }, `Clicking on a label for a form associated custom element with delegatesFocus should focus the custom element's focus delegate.`);
+};
+</script>