primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.2k stars 960 forks source link

Console Error on Left Click After Right Click in Data Table #6659

Open Vseslavr opened 1 month ago

Vseslavr commented 1 month ago

Describe the bug

When right-clicking on a row to open the context menu and then left-clicking on the same selected row, a console error occurs. This issue may not happen every time and might require several attempts of right and left-clicking to reproduce consistently.

Reproducer

https://stackblitz.com/edit/lw2qnq?file=src%2FApp.jsx

PrimeReact version

10.6.5

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Chrome 125

Steps to reproduce the behavior

Pre-conditions: The data table should be configured with the following parameters: ` <> <ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct([])} /> <DataTable value={customers2} loading={loading2} dataKey="id" selectionMode="multiple" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onContextMenu={(e) => cm?.current?.show(e.originalEvent)} contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value) }

<Column selectionMode="multiple" headerStyle={{ width: "3rem" }} <Column field="name" header="Name" className="font-bold" </>`

  1. Open the data table.
  2. Right-click on any row to open the context menu.
  3. Left-click on the same selected row.
  4. Observe the console for any errors. You may need to repeat steps 2 and 3 a few times to reliably reproduce the bug.

Console error: datatable.esm.js:2332 Uncaught TypeError: (collection || []).findIndex is not a function at findIndex (datatable.esm.js:2332:31) at onMultipleSelection (datatable.esm.js:2439:30) at Object.onRowClick (datatable.esm.js:2651:11) at onClick (datatable.esm.js:1768:11) at onClick (datatable.esm.js:2079:14) at HTMLUnknownElement.callCallback (react-dom.development.js:19449:14) at Object.invokeGuardedCallbackImpl (react-dom.development.js:19498:16) at invokeGuardedCallback (react-dom.development.js:19573:29) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:19587:25) at executeDispatch (react-dom.development.js:30622:3) at processDispatchQueueItemsInOrder (react-dom.development.js:30654:7) at processDispatchQueue (react-dom.development.js:30667:5) at dispatchEventsForPlugins (react-dom.development.js:30678:3) at eval (react-dom.development.js:30868:12) at batchedUpdates$1 (react-dom.development.js:23765:12) at batchedUpdates (react-dom.development.js:27584:12) at dispatchEventForPluginEventSystem (react-dom.development.js:30867:3) at dispatchEvent (react-dom.development.js:28640:5) at dispatchDiscreteEvent (react-dom.development.js:28611:5)

Screenshot 2024-05-23 154820

Expected behavior

No response

Rekl0w commented 1 month ago

Can you provide a stackblitz link please ?

Vseslavr commented 2 weeks ago

@Rekl0w I've provided stackblitz link.