diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts index 72a25b004619..b10b5224c94a 100644 --- a/src/material/chips/chip-row.ts +++ b/src/material/chips/chip-row.ts @@ -178,9 +178,14 @@ export class MatChipRow extends MatChip implements AfterViewInit { // The value depends on the DOM so we need to extract it before we flip the flag. const value = this.value; - this._isEditing = true; - this._editStartPending = true; + this._isEditing = this._editStartPending = true; + // Starting the editing sequence below depends on the edit input + // query resolving on time. Trigger a synchronous change detection to + // ensure that it happens by the time we hit the timeout below. + this._changeDetectorRef.detectChanges(); + + // TODO(crisbeto): this timeout shouldn't be necessary given the `detectChange` call above. // Defer initializing the input so it has time to be added to the DOM. setTimeout(() => { this._getEditInput().initialize(value); @@ -189,8 +194,7 @@ export class MatChipRow extends MatChip implements AfterViewInit { } private _onEditFinish() { - this._isEditing = false; - this._editStartPending = false; + this._isEditing = this._editStartPending = false; this.edited.emit({chip: this, value: this._getEditInput().getValue()}); // If the edit input is still focused or focus was returned to the body after it was destroyed,