From ebd38403881c5fe6c4577b7c8e68d6806d4a48d9 Mon Sep 17 00:00:00 2001
From: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
Date: Wed, 20 Nov 2024 21:31:13 +0100
Subject: [PATCH] LibWeb: Dispatch "click" event on input control associated
 with <label>

For example, in the following HTML:
```html
<label>
    <input type="radio" name="fruit" value="apple" id="radio1">
    <span class="box"></span>
</label>
```

When any descendant of a <label> element is clicked, a "click" event
must be dispatched on the <input> element nested within the <label>, in
addition to the "click" event dispatched on the clicked descendant.

Previously, this behavior was implemented only for text node descendants
by "overriding" the mouse event target using `mouse_event_target()` in
the TextPaintable. This approach was incorrect because it was limited to
text nodes, whereas the behavior should apply to any box. Moreover, the
"click" event for the input control must be dispatched *in addition* to
the event on the clicked element, rather than redirecting it.
---
 Libraries/LibWeb/Page/EventHandler.cpp        | 32 ++++++--
 Libraries/LibWeb/Painting/Paintable.h         |  1 -
 Libraries/LibWeb/Painting/TextPaintable.cpp   |  7 --
 Libraries/LibWeb/Painting/TextPaintable.h     |  1 -
 ...-control-associated-with-label-element.txt |  4 +
 ...control-associated-with-label-element.html | 75 +++++++++++++++++++
 6 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/UIEvents/click-event-on-input-control-associated-with-label-element.txt
 create mode 100644 Tests/LibWeb/Text/input/UIEvents/click-event-on-input-control-associated-with-label-element.html

diff --git a/Libraries/LibWeb/Page/EventHandler.cpp b/Libraries/LibWeb/Page/EventHandler.cpp
index 910f42fe3e9..b5e27638729 100644
--- a/Libraries/LibWeb/Page/EventHandler.cpp
+++ b/Libraries/LibWeb/Page/EventHandler.cpp
@@ -17,6 +17,7 @@
 #include <LibWeb/HTML/HTMLImageElement.h>
 #include <LibWeb/HTML/HTMLMediaElement.h>
 #include <LibWeb/HTML/HTMLVideoElement.h>
+#include <LibWeb/Layout/Label.h>
 #include <LibWeb/Layout/Viewport.h>
 #include <LibWeb/Page/DragAndDropEventHandler.h>
 #include <LibWeb/Page/EventHandler.h>
@@ -40,8 +41,6 @@ namespace Web {
 
 static GC::Ptr<DOM::Node> dom_node_for_event_dispatch(Painting::Paintable& paintable)
 {
-    if (auto node = paintable.mouse_event_target())
-        return node;
     if (auto node = paintable.dom_node())
         return node;
     auto* layout_parent = paintable.layout_node().parent();
@@ -53,6 +52,17 @@ static GC::Ptr<DOM::Node> dom_node_for_event_dispatch(Painting::Paintable& paint
     return nullptr;
 }
 
+static DOM::Node* input_control_associated_with_ancestor_label_element(Painting::Paintable& paintable)
+{
+    if (is<Layout::Label>(paintable.layout_node())) {
+        auto const& label = verify_cast<Layout::Label>(paintable.layout_node());
+        return label.dom_node().control().ptr();
+    }
+    if (auto const* label = paintable.layout_node().first_ancestor_of_type<Layout::Label>())
+        return label->dom_node().control().ptr();
+    return nullptr;
+}
+
 static bool parent_element_for_event_dispatch(Painting::Paintable& paintable, GC::Ptr<DOM::Node>& node, Layout::Node*& layout_node)
 {
     auto* current_ancestor_node = node.ptr();
@@ -351,6 +361,12 @@ EventResult EventHandler::handle_mouseup(CSSPixelPoint viewport_position, CSSPix
                     }
                 }
             }
+
+            if (auto* input_control = input_control_associated_with_ancestor_label_element(*paintable)) {
+                if (button == UIEvents::MouseButton::Primary) {
+                    input_control->dispatch_event(UIEvents::MouseEvent::create_from_platform_event(node->realm(), UIEvents::EventNames::click, screen_position, page_offset, viewport_position, offset, {}, button, buttons, modifiers).release_value_but_fixme_should_propagate_errors());
+                }
+            }
         }
     }
 
@@ -434,10 +450,14 @@ EventResult EventHandler::handle_mousedown(CSSPixelPoint viewport_position, CSSP
             if (dom_node) {
                 // See if we want to focus something.
                 GC::Ptr<DOM::Node> focus_candidate;
-                for (auto candidate = node; candidate; candidate = candidate->parent_or_shadow_host()) {
-                    if (candidate->is_focusable()) {
-                        focus_candidate = candidate;
-                        break;
+                if (auto* input_control = input_control_associated_with_ancestor_label_element(*paintable)) {
+                    focus_candidate = input_control;
+                } else {
+                    for (auto candidate = node; candidate; candidate = candidate->parent_or_shadow_host()) {
+                        if (candidate->is_focusable()) {
+                            focus_candidate = candidate;
+                            break;
+                        }
                     }
                 }
 
diff --git a/Libraries/LibWeb/Painting/Paintable.h b/Libraries/LibWeb/Painting/Paintable.h
index 738c85f00e3..12cccb5f557 100644
--- a/Libraries/LibWeb/Painting/Paintable.h
+++ b/Libraries/LibWeb/Painting/Paintable.h
@@ -179,7 +179,6 @@ public:
     virtual DispatchEventOfSameName handle_mousedown(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers);
     virtual DispatchEventOfSameName handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers);
     virtual DispatchEventOfSameName handle_mousemove(Badge<EventHandler>, CSSPixelPoint, unsigned buttons, unsigned modifiers);
-    virtual DOM::Node* mouse_event_target() const { return nullptr; }
 
     virtual bool handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigned buttons, unsigned modifiers, int wheel_delta_x, int wheel_delta_y);
 
diff --git a/Libraries/LibWeb/Painting/TextPaintable.cpp b/Libraries/LibWeb/Painting/TextPaintable.cpp
index 8f01aadfdc1..f4b04daa8f1 100644
--- a/Libraries/LibWeb/Painting/TextPaintable.cpp
+++ b/Libraries/LibWeb/Painting/TextPaintable.cpp
@@ -30,13 +30,6 @@ bool TextPaintable::wants_mouse_events() const
     return layout_node().first_ancestor_of_type<Layout::Label>();
 }
 
-DOM::Node* TextPaintable::mouse_event_target() const
-{
-    if (auto const* label = layout_node().first_ancestor_of_type<Layout::Label>())
-        return label->dom_node().control().ptr();
-    return nullptr;
-}
-
 TextPaintable::DispatchEventOfSameName TextPaintable::handle_mousedown(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned)
 {
     auto* label = layout_node().first_ancestor_of_type<Layout::Label>();
diff --git a/Libraries/LibWeb/Painting/TextPaintable.h b/Libraries/LibWeb/Painting/TextPaintable.h
index 8db7af67b1b..11ec2a3cd47 100644
--- a/Libraries/LibWeb/Painting/TextPaintable.h
+++ b/Libraries/LibWeb/Painting/TextPaintable.h
@@ -21,7 +21,6 @@ public:
     Layout::TextNode const& layout_node() const { return static_cast<Layout::TextNode const&>(Paintable::layout_node()); }
 
     virtual bool wants_mouse_events() const override;
-    virtual DOM::Node* mouse_event_target() const override;
     virtual DispatchEventOfSameName handle_mousedown(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers) override;
     virtual DispatchEventOfSameName handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers) override;
     virtual DispatchEventOfSameName handle_mousemove(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers) override;
diff --git a/Tests/LibWeb/Text/expected/UIEvents/click-event-on-input-control-associated-with-label-element.txt b/Tests/LibWeb/Text/expected/UIEvents/click-event-on-input-control-associated-with-label-element.txt
new file mode 100644
index 00000000000..ccfb60a7628
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/UIEvents/click-event-on-input-control-associated-with-label-element.txt
@@ -0,0 +1,4 @@
+mouseup event on box
+click event on box
+click event on input#radio1
+click event on input#radio2
diff --git a/Tests/LibWeb/Text/input/UIEvents/click-event-on-input-control-associated-with-label-element.html b/Tests/LibWeb/Text/input/UIEvents/click-event-on-input-control-associated-with-label-element.html
new file mode 100644
index 00000000000..cd0ab69f21a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/UIEvents/click-event-on-input-control-associated-with-label-element.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<style>
+    * {
+        margin: 0;
+    }
+
+    .box {
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+        background-color: purple;
+    }
+
+    input {
+        display: none;
+    }
+
+    label {
+        display: block;
+        width: 200px;
+        height: 200px;
+        border: 1px solid black;
+    }
+</style>
+<script src="../include.js"></script>
+<body>
+    <form>
+        <label>
+            <input type="radio" name="fruit" value="apple" id="radio1">
+            <span class="box"></span>
+        </label>
+        <label>
+            <input type="radio" name="fruit" value="banana" id="radio2">
+            hey
+        </label>
+    </form>
+</body>
+<script>
+    asyncTest(done => {
+        let eventCount = 0;
+        function endTestIfGotAllEvents() {
+            eventCount++;
+            if (eventCount == 4) {
+                done();
+            }
+        }
+
+        document.querySelectorAll('input').forEach(function (element) {
+            element.addEventListener('click', function (event) {
+                println(`click event on input#${event.target.id}`);
+                endTestIfGotAllEvents();
+            });
+            element.addEventListener('mouseup', function (event) {
+                println(`mouseup event on input#${event.target.id}`);
+                endTestIfGotAllEvents();
+            });
+        });
+
+        document.querySelectorAll('.box').forEach(function (element) {
+            element.addEventListener('click', function (event) {
+                println('click event on box');
+                endTestIfGotAllEvents();
+            });
+            element.addEventListener('mouseup', function (event) {
+                println('mouseup event on box');
+                endTestIfGotAllEvents();
+            });
+        });
+
+        internals.click(50, 50);
+        internals.click(50, 250);
+    });
+</script>
+</html>