ListBox: crash when item clicked by playwright

[avasuro]

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:

• 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.

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:

• 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