Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown loses focus in accordion when using arrow keys #14953

Closed
spahno opened this issue Mar 6, 2024 · 1 comment · Fixed by #15446
Closed

Dropdown loses focus in accordion when using arrow keys #14953

spahno opened this issue Mar 6, 2024 · 1 comment · Fixed by #15446
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-16-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@spahno
Copy link

spahno commented Mar 6, 2024

Describe the bug

After the update to PrimeNG 17.x.x the dropdowns, that are placed in an accordion, are losing focus when using the arrow keys to navigate through the dropdown options.

It works for selecting the first option, but after that, the dropdown loses focus and the accordion tabs are focused instead.
I created a blank sample app with the most recent Angular & PrimeNG versions and could verify this behavour.

<p-accordion [activeIndex]="0">

    <p-accordionTab header="Header I">

        <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [showClear]="true" placeholder="Select a City"></p-dropdown>

    </p-accordionTab>

</p-accordion>

Environment

"dependencies": {
    "@angular/animations": "^17.0.7",
    "@angular/common": "^17.0.7",
    "@angular/compiler": "^17.0.7",
    "@angular/core": "^17.0.7",
    "@angular/forms": "^17.0.7",
    "@angular/platform-browser": "^17.0.7",
    "@angular/platform-browser-dynamic": "^17.0.7",
    "@angular/router": "^17.0.7",
    "@ngrx/effects": "^17.0.1",
    "@ngrx/store": "^17.0.1",
    "@ngrx/store-devtools": "^17.0.1",
    "@ngx-translate/core": "^15.0.0",
    "@types/node": "^20.1.4",
    "lodash-es": "^4.17.21",
    "primeflex": "^3.3.0",
    "primeicons": "^6.0.1",
    "primeng": "^17.9.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  }

Reproducer

No response

Angular version

17.0.7

PrimeNG version

17.9.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.0

Browser(s)

Chrome 122

Steps to reproduce the behavior

  1. Click the p-dropdown
  2. Press an arrow key until the dropdown loses focus
  3. accordion tabs will be focused

Expected behavior

The focus should stay within the dropdown option list.

@spahno spahno added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 6, 2024
@mehmetcetin01140 mehmetcetin01140 added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 18, 2024
@Alhajras
Copy link

I just filed this issue and I guess they are related!

#15406

@cetincakiroglu cetincakiroglu added this to the 17.16.0 milestone May 3, 2024
@cetincakiroglu cetincakiroglu added LTS-16-PORTABLE Component: Accessibility Issue or pull request is related to WCAG or ARIA labels May 3, 2024
@cetincakiroglu cetincakiroglu self-assigned this May 3, 2024
@cetincakiroglu cetincakiroglu changed the title <p-dropdown> loses focus in <p-accordion> when using arrow keys Dropdown loses focus in accordion when using arrow keys May 3, 2024
cetincakiroglu added a commit that referenced this issue May 3, 2024
Fixed #14953 - Add missing stopPropagation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-16-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
4 participants