From 79eb5c12fb59624ea2e86395d7f748e258335521 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 13 Dec 2024 10:40:19 -0800 Subject: [PATCH] Make customizable select options listen to mouseup mouseup is better than mousedown because it allows the user to click and drag to choose an option like appearance:auto already does. More justification here: https://github.com/whatwg/html/issues/10762#issuecomment-2524122892 Change-Id: Ifa63d497b7dcfbc3d07e19d6a7850bddf57f78fc --- .../select-events.tentative.html | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html index fcf53233f18d7f3..a1f98bc05301f69 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html @@ -142,14 +142,18 @@ eventList = []; // Click on an option, with preventDefault - wrapper.addEventListener('click',(e) => e.preventDefault(),{once:true}); + wrapper.addEventListener('mouseup',(e) => e.preventDefault(),{once:true}); assert_equals(select.selectedOptions[0].innerText,'two'); await test_driver.click(option1); assert_true(select.matches(':open'),'click should be cancelled'); assert_events([ 'pointerdown on option1 at select', 'pointerdown on option1 at wrapper', 'mousedown on option1 at select', 'mousedown on option1 at wrapper', - 'click on option1 at select', 'click on option1 at wrapper', + 'focusout on option2 at select', 'focusout on option2 at wrapper', + 'focusin on select at select', 'focusin on select at wrapper', + 'pointerup on option1 at select', 'pointerup on option1 at wrapper', + 'mouseup on option1 at select', 'mouseup on option1 at wrapper', + 'click on option1 at select', 'click on option1 at wrapper' ],'click option, with preventDefault'); // Click on an option, no preventDefault @@ -159,11 +163,11 @@ assert_events([ 'pointerdown on option1 at select', 'pointerdown on option1 at wrapper', 'mousedown on option1 at select', 'mousedown on option1 at wrapper', - 'click on option1 at select', 'click on option1 at wrapper', + 'pointerup on option1 at select', 'pointerup on option1 at wrapper', + 'mouseup on option1 at select', 'mouseup on option1 at wrapper', 'input on select at select', 'input on select at wrapper', 'change on select at select', 'change on select at wrapper', - 'focusout on option2 at select', 'focusout on option2 at wrapper', - 'focusin on select at select', 'focusin on select at wrapper' + 'click on option1 at select', 'click on option1 at wrapper' ],'click option, no preventDefault'); },`Events, ${wrapper.dataset.description}`); });