Skip to content

Commit

Permalink
fix(material/chips): wait for onStable when editing a chip
Browse files Browse the repository at this point in the history
Address timing issue with MatChipRow. When a chip enters the editing
state wait for ngZone's `onStable` event before accessing the ViewChild
for the MatChipEditInput. Attempts to fix issue where editable chip goes
blank when entering the editing state (#27462).

What seemed to be happening is that the view would render the
MatChiEditInput when setting `_isEditing` to true, but sometimes the
ViewChild would not be initialized in the component. Address this issue
by adding additional wait using `_ngZone.onStable`.

Fix #27462.
  • Loading branch information
zarend committed Jul 14, 2023
1 parent c3f2a97 commit 2169f3f
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions src/material/chips/chip-row.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/
import {FocusMonitor} from '@angular/cdk/a11y';
import {MatChip, MatChipEvent} from './chip';
import {MatChipEditInput} from './chip-edit-input';
import {takeUntil} from 'rxjs/operators';
import {take, takeUntil} from 'rxjs/operators';
import {MAT_CHIP} from './tokens';

/** Represents an event fired on an individual `mat-chip` when it is edited. */
Expand Down Expand Up @@ -183,8 +183,12 @@ export class MatChipRow extends MatChip implements AfterViewInit {

// Defer initializing the input so it has time to be added to the DOM.
setTimeout(() => {
this._getEditInput().initialize(value);
this._editStartPending = false;
this._ngZone.onStable.pipe(take(1)).subscribe({
next: () => {
this._getEditInput().initialize(value);
this._editStartPending = false;
},
});
});
}

Expand Down

0 comments on commit 2169f3f

Please sign in to comment.