Prevent document from scrolling in customizable select popover

Pressing up or down on the first or last option of a customizable select should not let the document scroll. This was happening because the default event handler of the option was not handling the default if there was no option to focus in this keyboard event handler, but by setting the default as handled anyway this bug goes away. This was identified here: openui/open-ui#1087 (comment) Change-Id: I56ab094f468df1ef4847011763e20ea7e759d3f0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6006515 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1381284}
web-platform-tests · Nov 11, 2024 · 17b0de4 · 17b0de4
1 parent f54cd92
commit 17b0de4
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/...cs/forms/the-select-element/customizable-select/select-option-arrow-scroll.tentative.html b/...cs/forms/the-select-element/customizable-select/select-option-arrow-scroll.tentative.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/openui/open-ui/issues/1087#issuecomment-2381094286">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+.spacer {
+  height: 10000px;
+}
+</style>
+
+<select id=topofdocument>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<div class=spacer></div>
+
+<select id=bottomofdocument>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+const ArrowUp = '\uE013';
+const ArrowDown = '\uE015';
+['topofdocument', 'bottomofdocument'].forEach(selectName => {
+  const select = document.getElementById(selectName);
+  promise_test(async () => {
+    select.scrollIntoView();
+    await test_driver.click(select);
+    assert_equals(document.activeElement, select.querySelector('option'),
+      'First option should be focused when opening the select.');
+
+    const scroll = window.scrollY;
+    await test_driver.send_keys(document.activeElement, ArrowUp);
+    await test_driver.send_keys(document.activeElement, ArrowUp);
+    assert_equals(window.scrollY, scroll,
+      'Document should not be scrolled when pressing ArrowUp on the first option.');
+
+    await test_driver.send_keys(document.activeElement, ArrowDown);
+    await test_driver.send_keys(document.activeElement, ArrowDown);
+    assert_equals(window.scrollY, scroll,
+      'Document should not be scrolled when pressing ArrowDown on the last option.');
+  }, `${selectName}: Arrow keys on options should not scroll the document.`);
+});
+</script>