Dom: DomHandler syntax error

[Ko2nel]

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.

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: