Show a scrollbar with long lists of options and preserve keyboard navigation

[geoffrich]

Is your feature request related to a problem? Please describe.

When I put a lot of options in the list (for instance, 200+ country options), the list extends off the page. This example has 240+ items:

Describe the solution you'd like

Constrain the menu's height so that it overflows with a scrollbar instead of continuing down the page. Something will also need to be done to keep keyboard focus in view (see next section).

Describe alternatives you've considered

This is possible in userland with the following CSS...

auro-menu {
  overflow-y: auto;
  height: 300px;
}

... but that causes issues with keyboard navigation, since the box does not scroll when navigating between items with the up/down arrows, so you can no longer see what option is selected.

If the scrolling was expected by the component, it could take action to keep the selected item in view.

[braven112]

Notes: from refinement....

• This work will end up touching multiple elements. (dropdown, select, combobox)

[leeejune]

Guidelines added to menu's blueprint: https://www.figma.com/file/xwDiIDfSz6j9bM4TD3Ni5N/Menu?node-id=1301%3A6361

Will be adding design guidelines for select and suggest.

[blackfalcon]

Guidelines added to menu's blueprint: https://www.figma.com/file/xwDiIDfSz6j9bM4TD3Ni5N/Menu?node-id=1301%3A6361

Will be adding design guidelines for select and suggest.

I am assuming that this fits the model of what you were thinking @jason-capsule42

[jason-capsule42]

@leeejune Yes, this looks good for our first go at this.

@braven112 should we just reassign this same ticket to me to do the development or do you want to resolve this one with the figma work.

Also, at what point do these changed Figma designs get put onto the docsite? Seems like that should be added into the PR for the code changes.

[blackfalcon]

Also, at what point do these changed Figma designs get put onto the docsite? Seems like that should be added into the PR for the code changes.

The updates to Figma should be in a Figma branch, right @leeejune? AFAIK, when we release the update, that's when @leeejune will merge her branch and release. The docsite loads a fresh view of the Figma file with each request, so there is no need to update the docsite.

[blackfalcon]

Issue closed, design work delivered.