{{label}} <span *ngIf="hasChanged" class="text-danger">*</span>
</div>
<div *ngIf="!editing" tabindex="0" class="p-2"
- [ngClass]="{'has-changes': hasChanged}" (click)="toggleEditMode()">
+ [ngClass]="{'has-changes': hasChanged}" (keyup.enter)="toggleEditMode()"
+ (click)="toggleEditMode()">
<div class="d-flex"
*ngFor="let count of labelCounts | keyvalue">
<div class="flex-1">
-import {Component, OnInit, Input, Output, ViewChild, Renderer2, TemplateRef,
+import {Component, OnInit, Input, Output, ViewChild, TemplateRef,
EventEmitter} from '@angular/core';
import {StringComponent} from '@eg/share/string/string.component';
// interact with the template in any way.
@Input() editTemplate: TemplateRef<any>;
+ @Input() editInputDomId = '';
+
// In some cases, we can map display labels to something more
// human friendly.
@Input() displayAs: 'bool' | 'currency' = null;
}
toggleEditMode() {
- if (!this.readOnly) {
- this.editing = !this.editing;
+ if (this.readOnly) { return; }
+
+ this.editing = !this.editing;
+
+ // Avoid using selectRootElement to focus.
+ // https://stackoverflow.com/a/36059595
+ if (this.editing && this.editInputDomId) {
+ setTimeout(() => {
+ const node = document.getElementById(this.editInputDomId);
+ if (node) { node.focus(); }
+ });
}
}
}