Failed to execute 'querySelectorAll' (not a valid selector) error when tabbing out of calendar component

[stiekemaj]

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

We're using Selenium to test our front-end that has been written in Angular / PrimeNG. Recently, we've updated to PrimeNG 12.2.2 and since then we're experiencing problems with some of our selenium tests.

Specifically, those failing tests try to select a p-calendar, fill in a date and press tab to navigate to the next focusable element. When the tab has been pressed, nothing happens but the following error is logged:

Failed to execute 'querySelectorAll' on 'Element': '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))' is not a valid selector.

with the following stacktrace:

Function.find (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:670685)
Function.getFocusableElements (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:679260)
ke.onInputKeydown (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:570370)
<unknown> (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:543338)
jg (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:147151)
l (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:147313)
HTMLInputElement.<anonymous> (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:254883)
g.invokeTask (http://4ddb3623a49c/clb/kidosng/polyfills.192765a9ba3f500f4cde.js:1:9539)
Object.onInvokeTask (http://4ddb3623a49c/clb/kidosng/main.8839757f2209e6b0244f.js:1:194580)
g.invokeTask (http://4ddb3623a49c/clb/kidosng/polyfills.192765a9ba3f500f4cde.js:1:9460)

Unfortunately, I can't find a scenario to reproduce it manually, we've only seen these issues in selenium tests using chromedriver-87.0.4280.88.

Because we can't reproduce this issue manually, we've investigated the code and the changes that have been made between 12.2.1 (the version where we don't experience these issues) and 12.2.2. We've found the following change which I think is the cause of those issues:

1859368#diff-f06db4f0a39f51657e3d30d961041b622a933495cd2ac8d6f82e7078999ddef7

From what I understand is that this function (getFocusableElements) is invoked when an onInputKeydown occured and tries to find all focusable elements to find out which element should be set the focus on. When looking at the selectors and the change in the mentioned commit, I think the part [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]:not(.p-disabled)) is not correct. To me, it looks that the parentheses around :not([hidden]:not(.p-disabled)) are wrong and should be :not([hidden]):not(.p-disabled).

Currently, it selects elements which has class p-disabled and has not the attribute hidden. I think the function shouldn't select elements with class p-disabled or attribute hidden.

I can't proof if and why this selector will fail our tests, but I can imagine that older chromedrivers can't handle a :not in a :not. But to me, the current selector looks at least functionally wrong.

• Angular version: 12.2.13

• PrimeNG version: 12.2.2

• Browser: [chromedriver-87.0.4280.88]

• Language: [ TypeScript 4.3.5 ]

[yigitfindikli]

Hi @stiekemaj,

Thanks for your report and investigation.

[ghost]

Hi @yigitfindikli , thanks for fixing the issue. Will this fix also be added to v12.2.3 branch?