You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We use Playwright to run automated tests on our UI, and when Playwright "clicks" on a ListBox item, an error Cannot read properties of null (reading 'querySelector') appears.
This error occurs in the PrimeReact source code, approximately in components/lib/listbox/ListBox.js around line 482.
The reason for this issue is that Playwright, like any other automated testing tool, performs actions very quickly. During the "click" operation, it does the following:
Triggers mouseenter, mouseover, and mousemove events over the ListBox item that is going to be clicked.
Then it clicks on this item.
If the ListBox has focusOnHover={true}, after the "mousemove" event is triggered, PrimeReact internally schedules a "scroll hovered item into view" operation (using setTimeout with zero delay). Then Playwright quickly triggers the "click" event on this item, which causes the item to become selected, and our popup with the ListBox inside disappears/unmounts (this is our custom logic).
As a result, when the scheduled "scroll hovered item into view" operation runs, there is no listboxRef.current reference defined (since the component has already unmounted), and the code fails with an error.
Possible solution
Inside the setTimeout function, check if listboxRef.current still exists OR cancel timeout when component unmounts.
This one sometimes allows to reproduce this bug. In this example I tried to reproduce +- same behavior as happens in Playwright. To reproduce do the following:
click on "refresh" button (to do full page reload)
immediately after that quickly move mouse pointer in the area where listbox is displayed (preferrable: if you will be able to move mouse pointer before listbox is rendered)
after listbox is displayed - move mouse pointer over any of it's items
As result you should see an error. If error doesn't appears - click on "refresh" button again and repeat steps above. For me it reproduces approximately 6-8 times from 10 attempts.
PrimeReact version
10.7.0
React version
18.x
Language
TypeScript
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response
The text was updated successfully, but these errors were encountered:
melloware
added
Type: Bug
Issue contains a defect related to a specific component.
and removed
Status: Needs Triage
Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
labels
Jul 25, 2024
Uh oh!
There was an error while loading. Please reload this page.
Describe the bug
Problem
We use Playwright to run automated tests on our UI, and when Playwright "clicks" on a ListBox item, an error
Cannot read properties of null (reading 'querySelector')
appears.This error occurs in the PrimeReact source code, approximately in components/lib/listbox/ListBox.js around line 482.
The reason for this issue is that Playwright, like any other automated testing tool, performs actions very quickly. During the "click" operation, it does the following:
If the ListBox has
focusOnHover={true}
, after the "mousemove" event is triggered, PrimeReact internally schedules a "scroll hovered item into view" operation (using setTimeout with zero delay). Then Playwright quickly triggers the "click" event on this item, which causes the item to become selected, and our popup with the ListBox inside disappears/unmounts (this is our custom logic).As a result, when the scheduled "scroll hovered item into view" operation runs, there is no listboxRef.current reference defined (since the component has already unmounted), and the code fails with an error.
Possible solution
Inside the setTimeout function, check if listboxRef.current still exists OR cancel timeout when component unmounts.
Reproducer
https://codesandbox.io/s/primereact-listbox-crash-v6r6rc
This one sometimes allows to reproduce this bug. In this example I tried to reproduce +- same behavior as happens in Playwright. To reproduce do the following:
As result you should see an error. If error doesn't appears - click on "refresh" button again and repeat steps above. For me it reproduces approximately 6-8 times from 10 attempts.
PrimeReact version
10.7.0
React version
18.x
Language
TypeScript
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response
The text was updated successfully, but these errors were encountered: