Skip to content

Commit

Permalink
fix: task title edit text sometimes not being visible
Browse files Browse the repository at this point in the history
  • Loading branch information
johannesjo committed Sep 29, 2019
1 parent 04c1e67 commit 8edc839
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions src/app/ui/edit-on-click/edit-on-click.directive.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Directive, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';


// HELPER
Expand All @@ -8,12 +8,13 @@ import {Directive, ElementRef, EventEmitter, Input, OnInit, Output} from '@angul
@Directive({
selector: '[editOnClick]',
})
export class EditOnClickDirective implements OnInit {
export class EditOnClickDirective implements OnInit, OnDestroy {
@Input() isResetAfterEdit = false;
@Output() editFinished: EventEmitter<any> = new EventEmitter();
private _lastDomValue: string;
private _lastOutsideVal: string;
private readonly _el: HTMLElement;
private _redrawTimeout: number;

constructor(el: ElementRef) {
this._el = el.nativeElement;
Expand All @@ -40,9 +41,14 @@ export class EditOnClickDirective implements OnInit {
// setTimeout(() => {
// document.execCommand('selectAll', false, null);
// });

window.clearTimeout(this._redrawTimeout);
// this fixes the bug where the text is not visible for some time
// by triggering a redraw via el.offsetHeight
this._redrawTimeout = window.setTimeout(() => this._el.offsetHeight, 30);
});

el.addEventListener('input', () => {
el.addEventListener('input', (ev) => {
this._setValueFromElement();
});

Expand All @@ -54,7 +60,6 @@ export class EditOnClickDirective implements OnInit {
// prevent keyboard shortcuts from firing when here
el.addEventListener('keydown', (ev: KeyboardEvent) => {
ev.stopPropagation();

// blur on escape
if (ev.key === 'Enter' || ev.key === 'Escape') {
ev.preventDefault();
Expand Down Expand Up @@ -85,6 +90,9 @@ export class EditOnClickDirective implements OnInit {
};
}

ngOnDestroy(): void {
window.clearTimeout(this._redrawTimeout);
}

private _refreshView() {
this._el.innerText = this._value;
Expand Down

0 comments on commit 8edc839

Please sign in to comment.