fix(DataTable/BodyCell): apply updated cell value after value sorting

[KumJungMin]

Defect Fixes

• fix: DataTable: Edited cell values are not updated after value sorting #6572

How To Resolve

1. Change Event Trigger Order

Commits: [3763298, b5ca685]

Description:

• When changing and reflecting a cell's value, the primary events involved are cell-edit-init and cell-edit-complete.
• The cell-edit-init event initializes the cell's default values based on the current rowData.
• When the cell-edit-complete event is triggered, it updates the cell with the modified value.
• However, if the DataTable sorts the data when the cell-edit-complete event occurs, it results in the previous data remaining in the cell.
• This happens because when navigating from Cell A to Cell B, the event sequence is:

// Current event order

(A) `cell-edit-init` -> (B) `cell-edit-init` -> (A)`cell-edit-complete`

• To function as intended, the event sequence should be:

// Expected event order

(A) `cell-edit-init` -> (A)`cell-edit-complete` -> (B) `cell-edit-init`

• To resolve this issue, the event trigger order needs to be changed:
• First, modify the documentEditListener to trigger the event on mousedown instead of click when another cell is clicked.
• Second, update the documentEditListener to determine selfClick and execute completeEdit() accordingly.

2. Waiting 1ms to Ensure Focus

Commit: [bd0a270]

Description:

• In the updated hook, the element is focused after a 1ms delay:

updated() {
      ...
      if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
          setTimeout(() => {
              const focusableEl = getFirstFocusableElement(this.$el);

              focusableEl && focusableEl.focus(); 
          }, 1); /** here **/
      }
  },

• This ensures that the logic triggered by clicking outside waits for the element to be focused by delaying the execution by 1ms:

this.documentEditListener = (event) => {
    ...
    if (!this.selfClick) {
        this.editCompleteTimeout = setTimeout(() => {
            this.completeEdit(event, 'outside');
        }, 1); /** here **/
    }
};
	

3. Await Reactive Changes to Access the Latest Cell Data

Commit: [3763298]

Description:

• Currently, when performing [Tab] or [Shift+Tab] operations to navigate to the previous or next cell, the code directly accesses the DOM to find the cells.
• However, this approach causes the updated data not to be reflected in the cells.
• To fix this, a $nextTick operation is added to wait for the reactive data changes before accessing the latest cell data:

async moveToPreviousCell(event) {
      let currentCell = this.findCell(event.target);
      let targetCell = this.findPreviousEditableColumn(currentCell);
      if (targetCell) {
          await this.$nextTick();  /** here **/
          invokeElementMethod(targetCell, 'click');
          event.preventDefault();
      }
  },

Test

2024-12-22.5.30.22.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview	Dec 22, 2024 8:07am
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview	Dec 22, 2024 8:07am