Component: Table + Calendar: Row editing is closed when date is selected from calendar

[dgashby]

Describe the bug

If a p-table editable row has a cell containing a p-calendar component, selecting a date on the calendar component closes the calendar but also exits edit mode for the whole row. To edit other cells you need click on the edit button to re-enable edit mode for the row.

Note this issue was previously reported (#13343) with feedback from @mehmetcetin01140 to try the latest version. The behaviour is still the same with the latest PrimeNG 17.16.0, an updated example on stackblitz has been provided, see link below.

Environment

Angular + PrimeNG

Reproducer

https://stackblitz.com/edit/github-btvscd

Angular version

17.3.7

PrimeNG version

17.16.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.0

Browser(s)

Chrome 124.0.6367.118 (Debian)

Steps to reproduce the behavior

1. Click on the row edit button to enable editing mode.
2. Click on the first cell to open the calendar
3. Select a date from the calendar.
4. The calendar disappears
5. The row is no longer in edit mode.

Expected behavior

After selecting a date at step three, I would expect the row to remain in edit mode so other cells can be edited.

[cetincakiroglu]

Hi,

The situation causing this is dataKey. Table checks if the row is in edit state by using dataKey. In this case, the given dataKey should be a constant value so that the algorithm does not find and close the edited column. However, in the provided example, dataKey is a form variable that changes when a date is selected, causing the edited row not to be found and leading to the end of the editing process. DataKey should be constant and not change.

Here is a refactored version of your example: https://stackblitz.com/edit/github-btvscd-azcf3m?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Closing the issue, thanks for reporting!