From 3e3a200eeea895708b50526c5eb7406a8f0eb2e1 Mon Sep 17 00:00:00 2001
From: circl <circl.lastname@gmail.com>
Date: Sat, 2 Mar 2024 18:06:44 +0100
Subject: [PATCH] LibWeb: Do not issue `change` event for every update of color
 input

Per spec, the change event shall only be issued once the change is
finally committed by the user, IE by closing the color picker window.
---
 .../LibWeb/HTML/HTMLInputElement.cpp          | 20 ++++++++++---------
 .../Libraries/LibWeb/HTML/HTMLInputElement.h  |  3 ++-
 Userland/Libraries/LibWeb/Page/Page.cpp       |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
index 1d3c4a2282..2a7b2c8f0c 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
@@ -348,7 +348,7 @@ void HTMLInputElement::did_edit_text_node(Badge<BrowsingContext>)
     });
 }
 
-void HTMLInputElement::did_pick_color(Optional<Color> picked_color)
+void HTMLInputElement::did_pick_color(Optional<Color> picked_color, ColorPickerUpdateState state)
 {
     // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
     // For input elements without a defined input activation behavior, but to which these events apply
@@ -371,14 +371,16 @@ void HTMLInputElement::did_pick_color(Optional<Color> picked_color)
         });
 
         // and any time the user commits the change, the user agent must queue an element task on the user interaction task source
-        queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
-            // given the input element
-            // FIXME: to set its user interacted to true
-            // and fire an event named change at the input element, with the bubbles attribute initialized to true.
-            auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
-            change_event->set_bubbles(true);
-            dispatch_event(*change_event);
-        });
+        if (state == ColorPickerUpdateState::Closed) {
+            queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
+                // given the input element
+                // FIXME: to set its user interacted to true
+                // and fire an event named change at the input element, with the bubbles attribute initialized to true.
+                auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
+                change_event->set_bubbles(true);
+                dispatch_event(*change_event);
+            });
+        }
     }
 }
 
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
index 3e62cb11ba..045c658988 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
@@ -11,6 +11,7 @@
 #include <LibWeb/DOM/DocumentLoadEventDelayer.h>
 #include <LibWeb/DOM/Text.h>
 #include <LibWeb/FileAPI/FileList.h>
+#include <LibWeb/HTML/ColorPickerUpdateState.h>
 #include <LibWeb/HTML/FormAssociatedElement.h>
 #include <LibWeb/HTML/HTMLElement.h>
 #include <LibWeb/Layout/ImageProvider.h>
@@ -92,7 +93,7 @@ public:
 
     bool is_mutable() const { return m_is_mutable; }
 
-    void did_pick_color(Optional<Color> picked_color);
+    void did_pick_color(Optional<Color> picked_color, ColorPickerUpdateState state);
 
     void did_select_files(Span<SelectedFile> selected_files);
 
diff --git a/Userland/Libraries/LibWeb/Page/Page.cpp b/Userland/Libraries/LibWeb/Page/Page.cpp
index dfdce259f5..c5062703fc 100644
--- a/Userland/Libraries/LibWeb/Page/Page.cpp
+++ b/Userland/Libraries/LibWeb/Page/Page.cpp
@@ -337,7 +337,7 @@ void Page::color_picker_update(Optional<Color> picked_color, HTML::ColorPickerUp
 
         if (m_pending_non_blocking_dialog_target) {
             auto& input_element = verify_cast<HTML::HTMLInputElement>(*m_pending_non_blocking_dialog_target);
-            input_element.did_pick_color(move(picked_color));
+            input_element.did_pick_color(move(picked_color), state);
             if (state == HTML::ColorPickerUpdateState::Closed)
                 m_pending_non_blocking_dialog_target.clear();
         }