Calcite Dropdown: If dropdown has many items, it should have its own scrollbar

[dhrumil83]

codepen: https://codepen.io/dhrumil83/pen/xxGzJBm

Couple of issues:

1. Dropdown has 50 items. It ends up using the pages scrollbar to show ~20-25 items. Only way to get to the rest of them is to use the key down button on the keyboard,
   Calcite-dropdown should have its own scrollbar, similar to select.

2. When dropdown is opened, scroll/show by default to the active item. (Item50 in the codepen)

[jcfranco]

@macandcheese @paulcpederson I can take this one if you want. 😄 Any recommendations on a max-height for scrolling?

[paulcpederson]

Probably best to pick something fairly large and then add media queries based on screen height. Maybe like 400px?

[macandcheese]

Thanks @jcfranco. Maybe mirror width with a height: "s/m/l/auto", and default to "auto" which doesn't have a max height? It becomes kind of arbitrary to decide on these heights. Open to anything really.

It'd be a chore to implement but it would be nice if you could specify a number of items to display before scroll vs. a height. Maybe down the line, ha.

[jcfranco]

The dropdown already imposes a max-height, so maybe we just need to enable scrolling on the wrapper?

For the second part of this issue, should we always try to focus the active item and fallback to the first one when the dropdown is opened?

[macandcheese]

Re: focusing, I think right now it only focuses the first item when opened via key, and not on click...

I had initially thought about focusing the active item but decided not to - I think focusing on the active one makes sense for "single" selection mode, but it got weird for "multi" - as in what would be the best UX for "multi" selection mode (and then for "none" just focusing the first one)

Open to adding it though!

[macandcheese]

I suppose for "multi" we could just focus the first instance of an active item 🤷‍♂️