question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select UX review changes

See original GitHub issue

Some 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 and label
  • 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:closed
  • Created 5 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
blackswannycommented, Sep 19, 2018

@schnerd click is fixed @JoshRosenstein arrow is fixed

0reactions
schnerdcommented, Sep 26, 2018

@abmai @nadiia ^ let us know if you have feedback on that

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found