Skip to content

Keyboard navigation in Select / Virtual Select #3227

Open
@jrmyio

Description

@jrmyio

Keyboard navigation seems to not work as expected when compared to a native select. The following 3 problems occur:

Problem A

When scrolling down manually, then hovering over an item, using the keyboard up / down arrows will not cycle through the tems. Instead it will just move the scrollbar.

Steps to reproduce the behavior:

  1. Go to Virtualized Select
  2. Open the select.
  3. Move the scrollbar to roughly 50%.
  4. Hover over an item in the last.
  5. Use the arrow up or down key.

Expected behavior
When hovering over an item after scrolling down, I expect using the arrow/up keys to cycle through the options rather than just moving the scrollbar.

I expect the behavior to be more in line with https://codesandbox.io/s/q8l6xnvz7w where the scroll bar moves and X item or above or below the previous selected item is selected.

Problem B

Using page down / page up does not change the selected item. Instead it just changes the position of the scrollbar. When using the keyboard up / down arrows you will jump back in the list wherever the focused item was before using page-up / page -down.

Steps to reproduce the behavior:

  1. Go to Virtualized Select
  2. Open the select
  3. Hit page down a couple of times.
  4. Use the arrow up or down key.

Expected behavior
When using page-up / page-down the focused item should change, not just the scrollbar.

I expect the behavior to be more in line with https://codesandbox.io/s/q8l6xnvz7w where the scroll bar moves and X item or above or below the previous selected item is selected.

Problem C

When scrolling down manually, then hitting HOME or END, will move the scrollbar but not select the first or last item.

Steps to reproduce the behavior:

  1. Go to Virtualized Select
  2. Open the select
  3. Move the scrollbar to roughly 50%.
  4. Hit the HOME or END key.

Expected behavior
The first or last item is not selected, only the scrollbar moves.

I expect the behavior to be more in line with https://codesandbox.io/s/q8l6xnvz7w where both the scroll bar moves and the first / last item is selected.

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsNo code, just documentation.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      pFad - Phonifier reborn

      Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy