reach/reach-ui

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

Open

#698 opened on Nov 5, 2020

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (558 forks)auto 404
Help WantedType: Bug

Repository metrics

Stars
 (5,975 stars)
PR merge metrics
 (PR metrics pending)

Description

🐛 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)

Contributor guide

Research direction
Tech stack
Domain
Issue type
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Prerequisites
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.