search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Dropdown - Problems with arrow keys navigation after using Tab #6574

Open MarieOlligesgeers opened 1 year ago

MarieOlligesgeers commented 1 year ago

Reproduction:

  1. Set the focus to a dropdown.
  2. Use Tab or Arrow Down to focus on the first option.
  3. Now use the Tab key to focus on the second option. BUG: 1: Now try to select the first option with the arrow key. (Nothing Happend) BUG 2: Incorrectly, you no have to use the down arrow key to select the first item. BUG 3: If you leave the dropdown and enter it again, the first element in the dropdown is not focused as expected, but the one that was active last before you lost the focus.

Bug description: When navigating in a dropdown menu with the arrow keys on the keyboard after using tab, the dropdown does not respond as expected. The previous use of tab seems to disrupt the use of the arrow keys.

Plunker/StackBlitz that reproduces the issue: https://valor-software.com/ngx-bootstrap/#/components/dropdowns?tab=overview

Versions of ngx-bootstrap, Angular, and Bootstrap: ngx-bootstrap: v9.00 or v10.3.0 angular:

ngx-bootstrap:

Angular: v14.2.8

Bootstrap: v4.5.2

Expected behavior The dropdown should always be operable with the arrow keys even if I have previously navigated via tab. When using the dropdown with the keyboard navigation, the first element of the list is always focused regardless of whether I have navigated through the dropdown before.

innov-richa76 commented 1 year ago

Hi @MarieOlligesgeers , I am also facing the same issue. Can you please let me know if you have tried some alternative for this issue?