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

Dom: DomHandler syntax error #16466

Open
Ko2nel opened this issue Oct 1, 2024 · 0 comments
Open

Dom: DomHandler syntax error #16466

Ko2nel opened this issue Oct 1, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Ko2nel
Copy link

Ko2nel commented Oct 1, 2024

Describe the bug

In dynamic dialog windows, there's an error when changing focus using the TAB key.
A syntax error occurs in the well-known and beloved browser Internet Explorer v11.

To fix the error, the query must be corrected according to the example below.
https://github.com/primefaces/primeng/blob/12.2.2/src/app/components/dom/domhandler.ts#L592
The last negation occurring in the query:
...:not([hidden]:not(.p-disabled)) -> ...:not([hidden]):not(.p-disabled)

The fix is very much needed in version 12, as this is the last version of Angular that supports IE.

Whole query below:
current version:

button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]:not(.p-disabled))

fixed version:

button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]):not(.p-disabled)

Environment

IE 11 or Edge with IE support mode

Reproducer

No response

Angular version

12.2.2

PrimeNG version

12.2.2

Build / Runtime

Angular CLI App

Language

ES5

Node version (for AoT issues node --version)

12.14.0

Browser(s)

IE 11

Steps to reproduce the behavior

  1. Run in Edge with IE compatibility on or use IE11.
  2. Open primeng-v12-lts demo website.
  3. Navigate to dynamic dialog
  4. Press Show button (the dialog window will appear)
  5. Press TAB key on keyboard to change focus
  6. Open devtools to see syntax error (TIP in Edge you could run legacy IE dev tools running command %systemroot%\system32\f12\IEChooser.exe)

Expected behavior

Working TAB key in dynamic dialog in IE 11 browser.

@Ko2nel Ko2nel added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 1, 2024
@Ko2nel Ko2nel changed the title Component: DomHandler syntax error Dom: DomHandler syntax error Oct 1, 2024
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

1 participant