Make `Element::PostHandleEventForLinks` stop setting focus to it at `mousedown` when its descendant editable element will get focus
If `<a href="...">` element has editable elements and clicked in it, focus will
be moved to the editing host of the clicked element. Therefore,
`Element::PostHandleEventForLinks` shouldn't set focus to the link element in
the case.
Differential Revision: https://phabricator.services.mozilla.com/D154363
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1770161
gecko-commit: e850c76a0513a00dd9b000a690f6a4709a59932e
gecko-reviewers: smaug
diff --git a/dom/events/no-focus-events-at-clicking-editable-content-in-link.html b/dom/events/no-focus-events-at-clicking-editable-content-in-link.html
new file mode 100644
index 0000000..dc08636
--- /dev/null
+++ b/dom/events/no-focus-events-at-clicking-editable-content-in-link.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+<meta chareset="utf-8">
+<title>Clicking editable content in link shouldn't cause redundant focus related events</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+</head>
+<body>
+<a href="#"><span contenteditable>Hello</span></a>
+<a href="#" contenteditable><span>Hello</span></a>
+<script>
+function promiseTicks() {
+ return new Promise(resolve => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(resolve);
+ });
+ });
+}
+
+async function clickElementAndCollectFocusEvents(x, y, options) {
+ await promiseTicks();
+ let events = [];
+ for (const eventType of ["focus", "blur", "focusin", "focusout"]) {
+ document.addEventListener(eventType, event => {
+ events.push(`type: ${event.type}, target: ${event.target.nodeName}`);
+ }, {capture: true});
+ }
+
+ const waitForClickEvent = new Promise(resolve => {
+ addEventListener("click", resolve, {capture: true, once: true});
+ });
+
+ await new test_driver
+ .Actions()
+ .pointerMove(x, y, options)
+ .pointerDown()
+ .pointerUp()
+ .send();
+
+ await waitForClickEvent;
+ await promiseTicks();
+ return events;
+}
+
+promise_test(async t => {
+ document.activeElement?.blur();
+ const editingHost = document.querySelector("span[contenteditable]");
+ editingHost.blur();
+ const focusEvents =
+ await clickElementAndCollectFocusEvents(5, 5, {origin: editingHost});
+ assert_array_equals(
+ focusEvents,
+ [
+ "type: focus, target: SPAN",
+ "type: focusin, target: SPAN",
+ ],
+ "Click event shouldn't cause redundant focus events");
+}, "Click editable element in link");
+
+promise_test(async t => {
+ document.activeElement?.blur();
+ const editingHost = document.querySelector("a[contenteditable]");
+ editingHost.blur();
+ const focusEvents =
+ await clickElementAndCollectFocusEvents(5, 5, {origin: editingHost});
+ assert_array_equals(
+ focusEvents,
+ [
+ "type: focus, target: A",
+ "type: focusin, target: A",
+ ],
+ "Click event shouldn't cause redundant focus events");
+}, "Click editable link");
+</script>
+</body>
+</html>
