From 6045a0cfa319bd9bad27a3101ea06c36767566ef Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 17 Jul 2023 07:26:13 +0200 Subject: [PATCH] fix(material/chips): ensure that edit input query is re-evaluated on time (#27465) Fixes an issue that showed up in an internal app where the edit input query wasn't being evaluated on time which led to a runtime error. Fixes #27462. --- src/material/chips/chip-row.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) 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,