reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

Capture Enter key event in inline edit

Browse Source
This commit is contained in:
kiswa 2017-01-31 23:58:32 +00:00
parent a89d473e62
commit 79ffd00074
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/inline-edit/inline-edit.component.html
View File

@ -6,7 +6,7 @@
</span> </span>
<span [hidden]="isDisplay"> <span [hidden]="isDisplay">
<input #editText type="text" <input #editText type="text"
[value]="text" (keyup.enter)="editDone(editText.value)"> [value]="text" (keyup.enter)="editDone(editText.value, $event)">
<i class="icon icon-floppy color-primary" title="Save" <i class="icon icon-floppy color-primary" title="Save"
(click)="editDone(editText.value)"></i> (click)="editDone(editText.value)"></i>
</span> </span>

9
src/app/shared/inline-edit/inline-edit.component.ts
View File

@ -21,10 +21,17 @@ export class InlineEdit {
setTimeout(() => { el.focus(); }, 100); setTimeout(() => { el.focus(); }, 100);
} }
editDone(newText: string): void { editDone(newText: string, event: Event): void {
this.isDisplay = true; this.isDisplay = true;
this.text = newText; this.text = newText;
this.edit.emit(this.text); this.edit.emit(this.text);
// Prevent Enter key from propagating to parent controls
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
} }
} }