Comments (8)
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.
from open-ui.
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.
from open-ui.
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.
from open-ui.
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.
from open-ui.
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.
from open-ui.
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.
from open-ui.
@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:
- Opened Settings
- Went to Background
- Opened Background dropdown
- Navigated to an option not selected (my currently selected is Picture)
- Pressed escape
It reverted to Picture, which aligns with what the majority of libraries do but most browsers do not.
from open-ui.
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.
from open-ui.
Related Issues (20)
- Use cases for a button with multiple states HOT 12
- [focusgroup] Should focusgroup direction follow the DOM order or the visual order? HOT 4
- [switch] Should the switch element support swipe actions? HOT 7
- [switch] Should the switch have a toggle() method? HOT 1
- [popover] moving keyboard focus out of a popover should dismiss it HOT 9
- Target minimum size for select HOT 2
- [interest invokers] Touch inputs HOT 7
- Explore `<input>` Element as a child within `<select>` for Combobox HOT 3
- [invokers] Implicit targets HOT 10
- Toggle Button Proposal HOT 15
- Dismissing popovers when focus leaves HOT 6
- Will the stylable <select> element be able to break outside the browser window? HOT 6
- [invokers] setRangeText for textarea and inputs HOT 1
- [select] `<selectedoption for=id>` as an alternative to split buttons and `<button type=popover>` HOT 5
- [interest invokers] How to define/control the action on "losing interest" HOT 3
- Foundation for the Global Design System component library HOT 9
- [invokers] add a way to list supported commands?
- [invokers] add an invoke method?
- [Invokes] commands should be dash delimited HOT 1
- [select] mouse focus when clicking invoker to open dropdown
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-ui.