[Listbox] View jumps when opening listbox with space or down arrow.

[aappoalander]

🐛 Bug report

Current Behavior

Browser view jumps away from the focused ListboxOption when opening listbox with space or down arrow key. The focused elements is completely out of the view.

Expected behavior

Browser view / scroll position should remain unchanged or at least try to fit the focused element into to current view.

Reproducible example

https://reach.tech/listbox/#reach-skip-nav

To reproduce:

1. open the example page with a chromium based browser on Mac OS (maybe Windows too?)
2. use tab (you can use the skip link) to navigate to first listbox example
3. Press space or down arrow

Additional context

Seems to concern chromium based browsers at least on mac OS. Could also be a chromium bug since it is not reproducible with other browsers.

Your environment

Software	Name(s)	Version
Reach Package	Listbox	latest?
React
Browser	Chrome	86.0.4240.183
Assistive tech	-
Node
npm/yarn
Operating System	Mac OS	10.15.7 (19H2)

[aappoalander]

What is seen after pressing space:

And what remains hidden above current view:

[katesroad]

I had the same issue when using Listbox related components this way

<Listbox
   value={value}
   onChange={handleChange}
>
  <ListboxButton>text logic </ListBoxButton>
  <ListboxPopover>
    <ListboxList>
      <ListboxOption /> (multiple)
    </ListBoxList>
  </ListBoxPopover>

The jump happens after selecting one on the ul element rendered by ListboxList.

I resolved the issue by adding a negative margin-top to ListboxList.

Though not sure if this can be helpful, but I addressed jump issue using this not good hack