Primeng: TurboTable edit: cell should exit edit mode when clicked away

[szamanr]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

http://plnkr.co/edit/5URylSBfhC1506irg4fj?p=preview

Current behavior
using TurboTable with editable cells, when editing an item and then clicking away, the cell stays in edit mode showing an input field inside of the cell.

Expected behavior
when clicking away while editing an item, the cell should exit edit mode and show cell contents normally.

Minimal reproduction of the problem with instructions
see plunker above.

1. click on a cell (the cell will enter edit mode)
2. click somewhere else on the page - the cell is still in edit mode

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 5.0.0

• PrimeNG version: 5.2.0-rc.2

• Browser: Firefox 58

• Language: TypeScript 2.4.2

[mani301]

Yes this was working fine in old dataTable. Would expect this to be working AS IS. When can we expect this to be fixed ?

[szamanr]

any update on this?

[Zimoulis]

I was just searching for something and couldn't find anything. I just wrote this. It not perfect but this works for my project. Hope it helps.

<ng-template pTemplate="input"> <input type="number" [(ngModel)]="rowData[col.field](blur)="onBlurDeselect($event)"> </ng-template>

  onBlurDeselect(blurEvent: FocusEvent) {
     const key = {
          'key': '13',
          'keyCode': '13' // even though deprecated needs to be becuase primeng is using
      }
      const enterEvent = new KeyboardEvent('keydown', key);
      blurEvent['path'].forEach((obj: Element) => {
          if ('TD' === obj.tagName) {
               obj.dispatchEvent(enterEvent);
          }

      })
  }

[szamanr]

any update on this?

the workaround didn't work for me, i'm getting blurEvent.path is undefined when using on an input element like this:

<td pEditableColumn>
    <p-cellEditor>
        <ng-template pTemplate="input">
            <input type="text" [(ngModel)]="item.content" (blur)="deselectOnBlur($event)">
        </ng-template>
        <ng-template pTemplate="output">
            {{item.content}}
        </ng-template>
    </p-cellEditor>
</td>

[gabrielalack]

Bump!

This was a big issue with the DataTable for a long time. Disappointed to see the issue has risen from the grave with this "newer, better, faster" table!!

[cagataycivici]

There are technical limitations for this, assume if there is a component that has an overlay panel like dropdown, calendar and if the panel is appended to the body, clicking the panel will close the cell.

[szamanr]

why was this closed if the issue has not been resolved? surely the technical limitations mentioned can be worked around, e.g. marking the appended elements with a class and triggering the close action only when clicking on elements not having this class.

[guntram]

You can do this with an input editable cell:
<input type="text" [(ngModel)]="myModel" (blur)="blur($event)">
TS:

blur(event: any) {
    // sending enter keypress closes editable cell
    const triggerEvent = document.createEvent('Event');
    triggerEvent.initEvent('keydown', true, true);
    (<any>triggerEvent).which = (<any>triggerEvent).keyCode = 13;
    // send enter keydown event to input field (the target from the blur event)
    event.target.dispatchEvent(triggerEvent);
  }

[DanAtHome]

It might be obvious to everyone, but with the closeCellEdit method, this seems to solve the problem. Feel free to prettify

@ViewChild(Table) dt: Table;

@HostListener('document:click', ['$event'])
clickout(event) {
if (!this.dt.el.nativeElement.contains(event.target)) {
this.dt.closeCellEdit();
}
}

@HostListener('keydown', ['$event']) onKeyDown(e) {
if (e.keyCode == 9 && !this.dt.el.nativeElement.contains(event.target)) {
this.dt.closeCellEdit();
}
}

[mpscheidt]

if (!this.dt.el.nativeElement.contains(event.target)) {
this.dt.closeCellEdit();
}

It would be necessary to check if the the dt is currently in editing mode. Otherwise errors are thrown at you in the console.

[skorunka]

Hello, what is the progress on this? I got the same issues as described above. Thank you.

[redfox9961]

I had the same issue, when I was using cell editing inside component with OnPush change detection strategy. Switching to the default strategy fixed my problem.