DataTable: onCellEditComplete() called after form's onSubmit()

[inad9300]

Describe the bug

When hitting "Enter" to complete a cell's edition, if the table is inside a form, the form is submitted before onCellEditComplete() is called, leaving no opportunity to prevent form submission through event.stopPropagation(). This is likely due to onCellEditComplete() being wrapped with setTimeout(), I wonder why:

primereact/components/lib/datatable/BodyCell.js

Line 182 in 6cd5730

setTimeout(() => onCellEditComplete(params));

Reproducer

No response

PrimeReact version

10.5.1

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

[melloware]

@inad9300 its because of this ticket: #5556

[inad9300]

During my tests, I found a second problem: the enter key of the numeric keypad is not taken into account. This is because its "code" is "NumpadEnter", not "Enter". The "key" field should probably be used instead, as its value is "Enter" both for the regular and the numpad enter keys. There might be more places in the codebase with this issue.

As for my main problem, I still don't know how to circumvent the fact that my table is inside a form and cell editing needs to be independent from form submission, particularly given the setTimeout() that is in place. Any suggestions?

This might be seen as related to #3977. I believe it could be regarded as the same underlying problem: events at one layer trickle down to other layers that should not be affected.

[melloware]

Its not related to #3977 the idea is the same but the implementation and fix is totally different. Can you open a new ticket for NumpadEnter as that is also a different issue than this original issue of the setTimeout.