I am invoking a keydown event on a button click like this:
Code: Select all
const escapeEvent: any = document.createEvent('Event');
escapeEvent.keyCode = 27; // escape
escapeEvent.initEvent('keydown', true, true);
td.dispatchEvent(escapeEvent);
Code: Select all
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.isEnabled()) {
//enter
if (event.keyCode == 13) {
if (this.isValid()) {
this.domHandler.removeClass(this.dt.editingCell, 'ui-editing-cell');
this.dt.editingCell = null;
this.dt.onEditComplete.emit({ field: this.field, data: this.data });
}
event.preventDefault();
}
//escape
else if (event.keyCode == 27) {
if (this.isValid()) {
this.domHandler.removeClass(this.dt.editingCell, 'ui-editing-cell');
this.dt.editingCell = null;
this.dt.onEditCancel.emit({ field: this.field, data: this.data });
}
event.preventDefault();
}
//tab
else if (event.keyCode == 9) {
if (event.shiftKey)
this.moveToPreviousCell(event);
else
this.moveToNextCell(event);
}
}
}
The actuell cell which I am currently editing should close and it should switch to the output template. The problem is that if I invoke the event manually only the focus is lost but the cell is still in edit mode.
Why is it still in edit mode and not in text ouput mode?