What should pressing 'escape' do with the selected value for select?

[gregwhitworth]

While working on adding in the events for specific parts of the <select> I noticed that my assumption of what should occur when pressing escape upon changing an option did not behave that way in Chromium browsers on Windows. So I've put together a very basic repro steps, you can use this fiddle to test it out: https://jsfiddle.net/3uh6nfsr/

1. Open the popup and select option Two
2. Now re-open the popup and navigate to option Three using the keyboard by pressing the down arrow
3. Now press the escape key
4. Which option should be selected, Two or Three?

Keeping with the descriptivism of Open UI I decided to look at other browsers and libraries and the results are actually more diverse than I expected:

Library	Behavior	Would have selected Two or Three?
Chromium (Windows)	Selects the currently highlighted option	Three
Firefox (Windows)	Selects the currently highlighted option	Three
Safari (Catalina)	Retains the previously selected option	Two
Evergreen Combobox	Removes all selected options to default settings	N/A
Fluent UI	Retains the previously selected option	Two
Ant Design	Retains the previously selected option	Two
Atlas Kit	Retains the previously selected option	Two
Carbon	Selects the currently highlighted option	Three
Fluent UI	Retains the previously selected option	Two
FastDNA	Retains the previously selected option	Two
Lightning (uses native)	Retains the previously selected option	Three
Material Components	Retains the previously selected option	Two
Semantic	Retains the previously selected option	Two

So here are the results:

• Selected Option Two: 8/13
• Selected Option Three: 4/13
• Done something different: 1/13

In doing a quicker test of multiple selects this would actually bring consistency as multiple selects usually require another key to select them and thus escape does not set that value since it requires another input from the user.

Based on the above here is my proposed resolution:

When pressing the up and down keys changing options this does not update the value of the select

[gregwhitworth]

Testing a little bit further I decided to look at mouseover and pressing escape and clicking outside to dismiss the popup. This was much more consistent across them as well. So it seems the UAs and libraries that set the value on key up/down treat that the same as click on a given option.

[gregwhitworth]

It's worth noting, that while this issue is specific to escape, effectively it's about changing the state (or dismissing) the select using a way in which normally isn't identified as a user "selecting" the option. This could be clicking/touching outside the window, clicking cancel, etc.

[erikkroes]

The select is very confusing this way. There are differences in behaviour even on the same OS but with different browsers. Most of them have to do with keyboard navigation and/or recognizing the difference between focussing and selecting a value.

[gregwhitworth]

@erikkroes yep, that's what the table shows and what I'm trying for us to get agreement on. I personally find it confusing that moving the arrow key would select something when escape normally means to "cancel". Just to be a bit more thorough and it would be cool if someone can test settings on MacOS, I did the following on Windows:

1. Opened Settings
2. Went to Background
3. Opened Background dropdown
4. Navigated to an option not selected (my currently selected is Picture)
5. Pressed escape

It reverted to Picture, which aligns with what the majority of libraries do but most browsers do not.

[jouni]

macOS select controls keep the previously selected option. Both when pressing Esc and when clicking outside the popup. Chrome, Firefox, and Safari all work the same (as the controls inside OS level UIs).

Sidenote: that’s how the <vaadin-select> web component works as well.

In my view, the arrow keys and the mouse cursor is changing the focused item, kind of like simulating tab/shift+tab. Another explicit user action is required to actually activate/select the focused option.

[LJWatson]

In other contexts the escape key is used to, well, escape something, usually without any consequences (dismissing a dialog for example).

That said, when it comes to forms things are much less consistent I think. You can't exit out of a set of radio buttons using escape and have your selection unselected in the process - at least not in Chrome/Firefox on Windows.

Although I'm a habitual Firefox on Windows user, and I'm used to the last selected option remaining selected even when escape is used to exit the select, I have to say that this feels like the wrong outcome. Logically escape should let me exit the select without my actions being registered.

[gregwhitworth]

Thanks for the feedback @jouni and @LJWatson - we discussed this in the last telecon and I forgot to post the agreed upon resolution here.

Resolved: When pressing up or down the select value is not updated to the currently highlighted option

This effectively highlights the functionality that @jouni stated and it brings consistency on the platform.

[gregwhitworth]

The initial rough draft of events tied to parts (they aren't all there) have landed with this PR: #103

This contains the resolution above as the value of select is only updated on invocation of the option not merely changing focus to the option.