Skip to content

Commit db3895c

Browse files
committedJan 17, 2025·
fix(material/chips): fix chip blur timing (#30347)
(cherry picked from commit 7c9c898)
1 parent 7a3eb6c commit db3895c

File tree

1 file changed

+6
-8
lines changed

1 file changed

+6
-8
lines changed
 

‎src/material/chips/chip.ts

+6-8
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {_IdGenerator, FocusMonitor} from '@angular/cdk/a11y';
9+
import {FocusMonitor, _IdGenerator} from '@angular/cdk/a11y';
1010
import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
11+
import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
1112
import {DOCUMENT} from '@angular/common';
1213
import {
1314
ANIMATION_MODULE_TYPE,
@@ -30,21 +31,19 @@ import {
3031
QueryList,
3132
ViewChild,
3233
ViewEncapsulation,
33-
afterNextRender,
3434
booleanAttribute,
3535
inject,
3636
} from '@angular/core';
3737
import {
38-
_StructuralStylesLoader,
3938
MAT_RIPPLE_GLOBAL_OPTIONS,
4039
MatRippleLoader,
4140
RippleGlobalOptions,
41+
_StructuralStylesLoader,
4242
} from '@angular/material/core';
4343
import {Subject, Subscription, merge} from 'rxjs';
4444
import {MatChipAction} from './chip-action';
4545
import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
4646
import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
47-
import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
4847

4948
/** Represents an event fired on an individual `mat-chip`. */
5049
export interface MatChipEvent {
@@ -391,11 +390,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
391390
} else {
392391
// When animations are enabled, Angular may end up removing the chip from the DOM a little
393392
// earlier than usual, causing it to be blurred and throwing off the logic in the chip list
394-
// that moves focus not the next item. To work around the issue, we defer marking the chip
393+
// that moves focus to the next item. To work around the issue, we defer marking the chip
395394
// as not focused until after the next render.
396-
afterNextRender(() => this._ngZone.run(() => this._onBlur.next({chip: this})), {
397-
injector: this._injector,
398-
});
395+
this._changeDetectorRef.markForCheck();
396+
setTimeout(() => this._ngZone.run(() => this._onBlur.next({chip: this})));
399397
}
400398
}
401399
});

0 commit comments

Comments
 (0)
Please sign in to comment.