search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.36k stars 4.59k forks source link

Tabview issue inside p-dialog #9467

Closed aakashnebhani closed 1 year ago

aakashnebhani commented 3 years ago

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review Without PRO Support: ~8-12 weeks. With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) https://stackblitz.com/edit/primeng-tabview-demo-xmridf?file=src/app/app.component.html

Current behavior When we have a tab view in the content of p-dialog then tab key behavior(Accessibility) is not working. For example if we have 3 tabs in tab view inside a dialog then after opening the first tab we are able to navigate inside the content from the tab name using the keyboard tab key but after opening the 2nd tab we cannot navigate to content of 2nd tab from the tab name using the keyboard tab key. Basically tabbing from keyboard works only when 1st tab is active and it does not work for any other active tab

Expected behavior Accessibility for tab view should work in similar way inside dialog like it works without the dialog.

Minimal reproduction of the problem with instructions In the bexow example we have a tab view component inside the content of p-dialog. Now when we are on 1st tab and we press keyboard tab key then we can go inside the content directly using keyboard. But when the 2nd tab is active then we try to use tab key and navigate to content then the focus does not go to content at all.

https://stackblitz.com/edit/primeng-tabview-demo-xmridf?file=src/app/app.component.html

What is the motivation / use case for changing the behavior? Accessibility

prasadkhegade commented 2 years ago

Hello Team,

Is this issue resolved? If yes in which version it will be available?

Regards

prasadkhegade commented 2 years ago

You can set [focusTrap]="false" to fix it, as shown here: https://stackblitz.com/edit/angular-aggrid-pagination-k9xnss?file=src%2Fapp%2Fapp.component.html

But above property is not trap the focus on dialog it goes at background screen and start navigation, instead focus should remain and on dialog itself

mertsincan commented 1 year ago

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

monsterrave commented 1 year ago

I got the same issue and can confirm that even after updating angular and primeng to version 14 the issue still exists.

Additionally, i was using the primeng focustrap, when I removed it, tabbing is working as usual.