@@ -32,6 +32,8 @@ import {
32
32
booleanAttribute ,
33
33
numberAttribute ,
34
34
ANIMATION_MODULE_TYPE ,
35
+ afterNextRender ,
36
+ Injector ,
35
37
} from '@angular/core' ;
36
38
import { DOCUMENT } from '@angular/common' ;
37
39
import {
@@ -42,7 +44,6 @@ import {
42
44
} from '@angular/material/core' ;
43
45
import { FocusMonitor } from '@angular/cdk/a11y' ;
44
46
import { merge , Subject , Subscription } from 'rxjs' ;
45
- import { take } from 'rxjs/operators' ;
46
47
import { MatChipAvatar , MatChipTrailingIcon , MatChipRemove } from './chip-icons' ;
47
48
import { MatChipAction } from './chip-action' ;
48
49
import { BACKSPACE , DELETE } from '@angular/cdk/keycodes' ;
@@ -239,6 +240,8 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
239
240
*/
240
241
_rippleLoader : MatRippleLoader = inject ( MatRippleLoader ) ;
241
242
243
+ private _injector = inject ( Injector ) ;
244
+
242
245
constructor (
243
246
public _changeDetectorRef : ChangeDetectorRef ,
244
247
public _elementRef : ElementRef < HTMLElement > ,
@@ -407,10 +410,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
407
410
// When animations are enabled, Angular may end up removing the chip from the DOM a little
408
411
// earlier than usual, causing it to be blurred and throwing off the logic in the chip list
409
412
// that moves focus not the next item. To work around the issue, we defer marking the chip
410
- // as not focused until the next time the zone stabilizes .
411
- this . _ngZone . onStable
412
- . pipe ( take ( 1 ) )
413
- . subscribe ( ( ) => this . _ngZone . run ( ( ) => this . _onBlur . next ( { chip : this } ) ) ) ;
413
+ // as not focused until after the next render .
414
+ afterNextRender ( ( ) => this . _ngZone . run ( ( ) => this . _onBlur . next ( { chip : this } ) ) , {
415
+ injector : this . _injector ,
416
+ } ) ;
414
417
}
415
418
}
416
419
} ) ;
0 commit comments