LibWeb: Don't move focus when setting input value

Author: https://github.com/Gingeh
Commit: 1d9c404b8c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1355
Reviewed-by: https://github.com/gmta ✅
Reviewed-by: https://github.com/trflynn89

Tests/LibWeb/Text/expected/DOM/FormAssociatedElement-selection.txt

@@ -4,11 +4,16 @@ date-input selectionStart: null selectionEnd: null selectionDirection: null
 textarea selectionStart: 0 selectionEnd: 0 selectionDirection: none
 text-input selectionStart: 18 selectionEnd: 18 selectionDirection: none
 date input setting selectionStart error: InvalidStateError: setSelectionStart does not apply to this input type
+select event fired: 0 18
 text-input selectionStart: 0 selectionEnd: 18 selectionDirection: none
+select event fired: 2 4
 text-input selectionStart: 2 selectionEnd: 4 selectionDirection: forward
+select event fired: 1 4
 text-input selectionStart: 1 selectionEnd: 4 selectionDirection: forward
+select event fired: 1 5
 text-input selectionStart: 1 selectionEnd: 5 selectionDirection: forward
+select event fired: 6 6
 text-input selectionStart: 6 selectionEnd: 6 selectionDirection: forward
+select event fired: 6 6
 text-input selectionStart: 6 selectionEnd: 6 selectionDirection: backward
 textarea selectionStart: 0 selectionEnd: 9 selectionDirection: none
-select event fired: 9 9

Tests/LibWeb/Text/input/DOM/FormAssociatedElement-selection.html

@@ -4,7 +4,7 @@
 text</textarea>
 <script src="../include.js"></script>
 <script>
-    test(() => {
+    asyncTest(async done => {
         let textInput = document.getElementById('text-input');
         let dateInput = document.getElementById('date-input');
         let textarea = document.getElementById('textarea');
@@ -26,21 +26,46 @@ text</textarea>
             println(`date input setting selectionStart error: ${e}`);
         }
 
-        textInput.addEventListener('select', e => println(`select event fired: ${e.target.selectionStart} ${e.target.selectionEnd}`))
+
+        textInput.addEventListener('select', e => println(`select event fired: ${e.target.selectionStart} ${e.target.selectionEnd}`));
+        const waitForSelect = (element) => {
+            return new Promise(resolve => {
+                const handler = () => {
+                    element.removeEventListener('select', handler);
+                    resolve();
+                };
+                element.addEventListener('select', handler);
+            });
+        };
+
         textInput.select();
-        dumpSelection(textInput);
-        textInput.setSelectionRange(2, 4, 'forward');
-        dumpSelection(textInput);
-        textInput.selectionStart = 1;
-        dumpSelection(textInput);
-        textInput.selectionEnd = 5;
-        dumpSelection(textInput);
-        textInput.selectionStart = 6;
-        dumpSelection(textInput);
-        textInput.selectionDirection = 'backward';
+        await waitForSelect(textInput);
         dumpSelection(textInput);
 
+        textInput.setSelectionRange(2, 4, 'forward');
+        await waitForSelect(textInput);
+        dumpSelection(textInput);
+
+        textInput.selectionStart = 1;
+        await waitForSelect(textInput);
+        dumpSelection(textInput);
+
+        textInput.selectionEnd = 5;
+        await waitForSelect(textInput);
+        dumpSelection(textInput);
+
+        textInput.selectionStart = 6;
+        await waitForSelect(textInput);
+        dumpSelection(textInput);
+
+        textInput.selectionDirection = 'backward';
+        await waitForSelect(textInput);
+        dumpSelection(textInput);
+
+        textarea.addEventListener('select', e => {
+            dumpSelection(textarea);
+            done();
+        });
         textarea.select();
-        dumpSelection(textarea);
     });
 </script>

Userland/Libraries/LibWeb/HTML/FormAssociatedElement.cpp

@@ -508,7 +508,7 @@ WebIDL::ExceptionOr<void> FormAssociatedTextControlElement::set_selection_range(
 }
 
 // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#set-the-selection-range
-void FormAssociatedTextControlElement::set_the_selection_range(Optional<WebIDL::UnsignedLong> start, Optional<WebIDL::UnsignedLong> end, SelectionDirection direction)
+void FormAssociatedTextControlElement::set_the_selection_range(Optional<WebIDL::UnsignedLong> start, Optional<WebIDL::UnsignedLong> end, SelectionDirection direction, SelectionSource source)
 {
     // 1. If start is null, let start be zero.
     start = start.value_or(0);
@@ -551,9 +551,9 @@ void FormAssociatedTextControlElement::set_the_selection_range(Optional<WebIDL::
     if (was_modified) {
         auto& html_element = form_associated_element_to_html_element();
 
-        // AD-HOC: If there is no selection, we do not fire the event. This seems to correspond to how
-        //         other browsers behave.
-        if (m_selection_start != m_selection_end) {
+        // AD-HOC: We don't fire the event if the user moves the cursor without selecting any text.
+        //         This is not in the spec but matches how other browsers behave.
+        if (source == SelectionSource::DOM || m_selection_start != m_selection_end) {
             html_element.queue_an_element_task(Task::Source::UserInteraction, [&html_element] {
                 auto select_event = DOM::Event::create(html_element.realm(), EventNames::select, { .bubbles = true });
                 static_cast<DOM::EventTarget*>(&html_element)->dispatch_event(select_event);

Userland/Libraries/LibWeb/HTML/FormAssociatedElement.h

@@ -122,6 +122,11 @@ private:
     bool m_parser_inserted { false };
 };
 
+enum class SelectionSource {
+    UI,
+    DOM,
+};
+
 class FormAssociatedTextControlElement : public FormAssociatedElement {
 public:
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-textarea/input-relevant-value
@@ -151,7 +156,7 @@ public:
     WebIDL::ExceptionOr<void> set_range_text(String const& replacement, WebIDL::UnsignedLong start, WebIDL::UnsignedLong end, Bindings::SelectionMode = Bindings::SelectionMode::Preserve);
 
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-setselectionrange
-    void set_the_selection_range(Optional<WebIDL::UnsignedLong> start, Optional<WebIDL::UnsignedLong> end, SelectionDirection direction = SelectionDirection::None);
+    void set_the_selection_range(Optional<WebIDL::UnsignedLong> start, Optional<WebIDL::UnsignedLong> end, SelectionDirection direction = SelectionDirection::None, SelectionSource source = SelectionSource::DOM);
 
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-setselectionrange
     WebIDL::ExceptionOr<void> set_selection_range(Optional<WebIDL::UnsignedLong> start, Optional<WebIDL::UnsignedLong> end, Optional<String> direction);

Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -562,7 +562,7 @@ WebIDL::ExceptionOr<void> HTMLInputElement::set_value(String const& value)
                 m_text_node->set_data(m_value);
                 update_placeholder_visibility();
 
-                document().set_cursor_position(DOM::Position::create(realm, *m_text_node, m_text_node->data().bytes().size()));
+                set_the_selection_range(m_text_node->length(), m_text_node->length());
             }
 
             update_shadow_tree();
@@ -2429,7 +2429,7 @@ HTMLInputElement::ValueAttributeMode HTMLInputElement::value_attribute_mode() co
 
 void HTMLInputElement::selection_was_changed(size_t selection_start, size_t selection_end)
 {
-    if (!m_text_node)
+    if (!m_text_node || !document().cursor_position() || document().cursor_position()->node() != m_text_node)
         return;
 
     document().set_cursor_position(DOM::Position::create(realm(), *m_text_node, selection_end));

Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp

@@ -164,8 +164,6 @@ String HTMLTextAreaElement::value() const
 // https://html.spec.whatwg.org/multipage/form-elements.html#dom-textarea-value
 void HTMLTextAreaElement::set_value(String const& value)
 {
-    auto& realm = this->realm();
-
     // 1. Let oldAPIValue be this element's API value.
     auto old_api_value = api_value();
 
@@ -182,7 +180,7 @@ void HTMLTextAreaElement::set_value(String const& value)
             m_text_node->set_data(m_raw_value);
             update_placeholder_visibility();
 
-            document().set_cursor_position(DOM::Position::create(realm, *m_text_node, m_text_node->data().bytes().size()));
+            set_the_selection_range(m_text_node->length(), m_text_node->length());
         }
     }
 }
@@ -463,7 +461,7 @@ void HTMLTextAreaElement::queue_firing_input_event()
 
 void HTMLTextAreaElement::selection_was_changed(size_t selection_start, size_t selection_end)
 {
-    if (!m_text_node)
+    if (!m_text_node || !document().cursor_position() || document().cursor_position()->node() != m_text_node)
         return;
 
     document().set_cursor_position(DOM::Position::create(realm(), *m_text_node, selection_end));

Userland/Libraries/LibWeb/Page/EventHandler.cpp

@@ -1215,7 +1215,7 @@ void EventHandler::update_selection_range_for_input_or_textarea()
         target = static_cast<HTML::HTMLTextAreaElement&>(*shadow_host);
 
     if (target.has_value())
-        target.value().set_the_selection_range(selection_start, selection_end, direction);
+        target.value().set_the_selection_range(selection_start, selection_end, direction, HTML::SelectionSource::UI);
 }
 
 Unicode::Segmenter& EventHandler::word_segmenter()