Primeng: Switch cell to view mode when focus is lost on editable cells

Created on 26 Jan 2017  路  5Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")
[x] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
http://www.primefaces.org/primeng/#/datatable/editable

Current behavior
Try editing one field, and click with your mouse anywhere outside the table. The cell was in edit mode (input was created), it looses focus, but edit stays. It is impossible to remove all inputs from editable Datatable when it was edited once.

Expected behavior
Since input is created only when cell is edited (onclick -> gets focus), the input should be removed when it loses focus. Now it only happens when other cell is selected, but the last selected cell will remain with input all the time.

Minimal reproduction of the problem with instructions
Plain Datatable with editable=true.

What is the motivation / use case for changing the behavior?
It is counterintuitive to have open for the cell that is no longer edited (since lost focus) and looks bad.

  • Angular version: 2.3.1
  • PrimeNG version: 2.0.0-RC1
  • Browser: all
  • Language: TypeScript 2.0
  • Node (for AoT issues): v6.8.0
enhancement

Most helpful comment

In your Html Template page:

<p-dataTable [value]="data" #dt>
...
</p-dataTable>

In the Component:
@ViewChild(DataTable) dt: DataTable;
When Editing is finished:

let editedCell = this.dt.editingCell;
this.dt.switchCellToViewMode(editedCell);

All 5 comments

+1 for this.
This bug is apparent on the demo page as well:
http://www.primefaces.org/primeng/#/datatable/editable

Implemented but only for built-in editor inputs, I can't think of a way for custom editors since we don't know the content of them.

How about just a cellFocusLost event? I need to perform logic on a cell when focus is lost. and right now onEditComplete only fires when enter is pushed, not when cell focus is lost.

In your Html Template page:

<p-dataTable [value]="data" #dt>
...
</p-dataTable>

In the Component:
@ViewChild(DataTable) dt: DataTable;
When Editing is finished:

let editedCell = this.dt.editingCell;
this.dt.switchCellToViewMode(editedCell);

Love your answer!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Helayxa picture Helayxa  路  3Comments

SchneMa picture SchneMa  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

miresk picture miresk  路  3Comments

watalberto picture watalberto  路  3Comments