`ListBox` sticky items with an embedded `<input>` will scroll when typing in Chrome

[mkrause]

See this story: /story/components-forms-controls-listbox--list-box-with-custom-items

If you scroll down a bit, and then type in the search input, the entire list box scrolls up a bit on every key stroke.

[mkrause]

Did some investigation. This is happening due to the scroll-padding-block-start on the list box. When you type in an input, and the input is outside of the scroll container, browsers will try to scroll that input into view. In this case, the input is in view but due to the scroll padding Chrome is trying to scroll up a bit to get the input down. This doesn't work of course, because the item is sticky... Note that this only seems to happen in Chrome, so I would consider this a Chrome bug.

We could remove the scroll-padding-block-start, but then we get another problem which is that items that are underneath the sticky header won't get scrolled into view (e.g. keyboard navigation).

We could use event.preventDefault() to prevent the auto scroll into view, however that will break the actual input into the text field.