PrefectHQ / prefect-design

https://prefect-design.netlify.app
Apache License 2.0
29 stars 11 forks source link

Fix arrowing in UI select menus #1053

Open brandonreid opened 9 months ago

brandonreid commented 9 months ago

When opening a select menu there are a few basic improvements we should make:

  1. Currently when opening the menu, you can arrow down and highlight options, once you hit the bottom, it doesn't loop back to the top, but it should.
  2. When opening the menu, you can arrow up immediately and the last option will highlight, allowing you to arrow up from there, when you get to the top you aren't brought back to the bottom when continuing to arrow up.
  3. When arrowing out of view, the popup should scroll so you can see the highlighted option.

https://github.com/PrefectHQ/prefect-design/assets/6776415/3db153dc-cf57-4bb7-94f2-b926f3a3676d

pleek91 commented 9 months ago

For 1 that's not how browser's implementation works which we've tried to follow. If you use the native select in this demo you'll see that arrowing up at the top does not loop back to the bottom neither does arrowing down from the bottom loop you back to the top. Do you fee strongly about this?

For 2 I think we just need to default highlight the first option when it opens and that would fix that.

3 is for sure an issue 👍