Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to spec user interaction for select #10762

Open
josepharhar opened this issue Nov 14, 2024 · 5 comments
Open

How to spec user interaction for select #10762

josepharhar opened this issue Nov 14, 2024 · 5 comments
Labels
topic: select The <select> element

Comments

@josepharhar
Copy link
Contributor

josepharhar commented Nov 14, 2024

What is the issue with the HTML Standard?

As part of customizable select, there is desire to add something to the spec that explains how the user can interact with the select element. There is already some paragraphs related to choosing options, which basically just says that input and change events should be fired after the user chooses an option.

Potential actions:

  • Activating the button to toggle the picker open/closed
  • Choosing an option
  • Navigating between options (arrow keys)

Potential requirements:

  • What events are fired in each case?
    • Are we allowed or disallowed from talking about pointerup, pointerdown, mouseup, mousedown, keyup, keydown, keypress, and click in the spec?
    • Can/should we talk about the details of these events, such as what the key property of a relevant KeyboardEvent should be?
  • Is there a consistent set of events? Or might they be different depending on input mode or platform? (keyboard vs mouse)
    • Should we provide a list of different events that input modes or devices can choose from?
  • What does calling preventDefault on any relevant events do?
  • What elements are the events fired on?
    • For actions related to options, I would hope that we can fire the events on options rather than the select element.
    • More generally, I don't want to change the fundamentals of how keyboard and mouse events work in web content inside the picker popover in the browser.
  • Making everything the same for appearance:auto and appearance:base
    • [select] keyboard behavior openui/open-ui#1087 (comment)
    • I could imagine that it could be hard or not compatible to patch this event behavior into native pickers, but who knows.
    • There are also platform specific variations, like the selection-follows-focus and click-and-drag behaviors for select elements in chrome on windows and linux.
  • Ending up with some way of opening the base appearance popover without user activation, whether that's select.click() or select.showPicker()
  • Hopefully we can end up with something that is actually testable in WPT with existing things like test_driver.click() and test_driver.Actions(), so that all the tests I've written so far don't just become non-interoperable suggestions.

Potential solutions:

@josepharhar josepharhar added the topic: select The <select> element label Nov 14, 2024
@josepharhar
Copy link
Contributor Author

@domenic @annevk @smaug----

@annevk
Copy link
Member

annevk commented Nov 14, 2024

I think it's important context to state why this is important: the popup is not script-observable without appearance: base. E.g., keydown is not fired when cycling through options.

@josepharhar
Copy link
Contributor Author

At whatnot we discussed this, and it sounded helpful to start by providing a list of situations where preventDefault would change the behavior. There was also a discussion about reusing the popovertarget activation behavior to open the popover picker.

@annevk
Copy link
Member

annevk commented Nov 15, 2024

FWIW, when I played with this yesterday it seems that pressing the down arrow on a closed select element does fire a keydown event on the select element (and opens the picker). So that at least is already exposed regardless of appearance.

@smaug----
Copy link

Sure, the focus is in that case on select. In the new case the focus is on option elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: select The <select> element
Development

No branches or pull requests

3 participants