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

Focus trapped in Dropdown component #13778

Open
JenWue opened this issue Sep 29, 2023 · 6 comments
Open

Focus trapped in Dropdown component #13778

JenWue opened this issue Sep 29, 2023 · 6 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@JenWue
Copy link

JenWue commented Sep 29, 2023

Describe the bug

When I tab through a form mask containing multiple different input elements using the Tab key after getting the focus inside a PrimeNG Dropdown element the focus is trapped so there is not way to get the focus out using the keyboard navigation. The issue can be easily reproduced on the PrimeNG documentation and example website. Dropdown component should not react with "preventDefault()" on the Tab keydown event.

Environment

Angular 16 (16.2.4) and PrimenNG 16.3.1

Reproducer

No response

Angular version

16.2.4

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.1

Browser(s)

Chrome 117

Steps to reproduce the behavior

No response

Expected behavior

No response

@JenWue JenWue added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 29, 2023
@PedenFraHeden
Copy link

Having the same problem here

@ashikjs
Copy link
Contributor

ashikjs commented Oct 2, 2023

@JenWue, can you write details or few line about expected behavior.

@ashikjs
Copy link
Contributor

ashikjs commented Oct 2, 2023

I guesses this issue already reported by others. #13774

@arjunreddy-001
Copy link

arjunreddy-001 commented Oct 21, 2023

I am also facing this issue in v16.5.1
It was working fine in v15.4.1

Below code in v16.5.1 doesn't work with tab traversing -
`
<p-dropdown
[options]="options"
optionLabel="name"
optionValue="value"
styleClass="p-dropdown-sm"
[formControlName]="controlName"

`

But, without options it's working - (without options dropdown is of no use 🤷‍♂️)
`
<p-dropdown
styleClass="p-dropdown-sm"
[formControlName]="controlName"

`

@mnhock
Copy link

mnhock commented Oct 27, 2023

We run into this issue as well.

@richard-collette-precisely

Seems to still be an issue and is related to
#13957

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

6 participants