Select UX review changes
See original GitHub issueSome of the changes that we discussed while reviewing the new Select component.
Styles
- Select element has
not-allowed
cursor even though not disabled, should have default cursor - Center search dropdown (currently alligned left)
- Selected option in single-select looks very dim, should be black
- Tag styles/padding (@nguyensomniac to update the designs)
- Active single select should maybe have border/highlight (@nguyensomniac to update designs)
- Select & highlighted items should have different styles (@nguyensomniac to update designs)
- Make sure disabled state works as per https://github.com/uber-web/baseui/pull/198
Keyboard
- Single-select should have tabindex so it can be focused (multi-select is okay since it has input)
- When
TYPE.select
is focused, down arrow and spacebar should open dropdown - Backspace should delete an item in multi-select
- Pressing enter on highlighted item should select/deselect it.
- Escape should close the dropdown for both single and multi-select
General Functionality (some reported by users) (Added by @abmai)
- Dropdown begins in an open state
- For
TYPE.search
dropdown does not re-open after closing - Selecting an object should return entire object not just
id
andlabel
- For
TYPE.search
selecting an option does not clear current input value - Single-mode
TYPE.search
not supported? We should have something similar to default behavior of react-select Single mode
Stories
- Search doesn’t seem to work reliably in the first multi-select storybook example. Maybe we should do a fixed set of options in first story, and have a separate story for demonstrating async results?
- Images and labels are overflowing tag in custom label story
- Clear the search term on item selected or dropdown closed, make the closing configurable
- Add a search/single mode example
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (6 by maintainers)
Top Results From Across the Web
A Complete Guide to UX Review – Benefits for Your Business
UX review methods · 1. Expert evaluation. In order to find potential usability issues and provide recommendations for change, a UX expert reviews...
Read more >Review UI Overview
Changes for which you are currently in attention set can be found using attention:<User> in search and show up in a separate category...
Read more >Case study: Designing for status changes | by UX Monster
1) Background. Status changes happen a lot when we use a product. Sending an email. The status will change from 'Not Sent' to...
Read more >The ultimate guide for selection controls in UX design - Prototypr
There are four types of selection controls: checkboxes, toggle switches, radio buttons and dropdown list.
Read more >How to choose the right UI pattern for your next product update
Evaluate the noteworthiness of your product update · How many of your users will the product update affect? · How user-facing is the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@schnerd click is fixed @JoshRosenstein arrow is fixed
@abmai @nadiia ^ let us know if you have feedback on that