fix(material/chips): focus not moved on destroy (#31653)

We have some logic that moves focus if a chip is destroyed so that it doesn't go back to the `body`. The removal timing seems to have changed at some point which broke the focus restoration, because the element is blurred before it is destroyed.

These changes make the logic a bit more robust by checking the key manager for the removed chip.

Author: crisbeto

goldens/material/chips/index.api.md

@@ -79,6 +79,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     focus(): void;
     _getActions(): MatChipAction[];
     _getSourceAction(target: Node): MatChipAction | undefined;
+    _hadFocusOnRemove: boolean;
     _handleKeydown(event: KeyboardEvent): void;
     _handlePrimaryActionInteraction(): void;
     // (undocumented)

src/material/chips/chip-set.ts

@@ -288,14 +288,25 @@ export class MatChipSet implements AfterViewInit, OnDestroy {
   /** Starts tracking the destroyed chips in order to capture the focused one. */
   private _trackDestroyedFocusedChip() {
     this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event: MatChipEvent) => {
-      const chipArray = this._chips.toArray();
-      const chipIndex = chipArray.indexOf(event.chip);
-
       // If the focused chip is destroyed, save its index so that we can move focus to the next
       // chip. We only save the index here, rather than move the focus immediately, because we want
       // to wait until the chip is removed from the chip list before focusing the next one. This
       // allows us to keep focus on the same index if the chip gets swapped out.
-      if (this._isValidIndex(chipIndex) && event.chip._hasFocus()) {
+      const chipArray = this._chips.toArray();
+      const chipIndex = chipArray.indexOf(event.chip);
+      const hasFocus = event.chip._hasFocus();
+      const wasLastFocused =
+        event.chip._hadFocusOnRemove &&
+        this._keyManager.activeItem &&
+        event.chip._getActions().includes(this._keyManager.activeItem);
+
+      // Note that depending on the timing, the chip might've already lost focus by the
+      // time we check this. We need the `wasLastFocused` as a fallback to detect such cases.
+      // In `wasLastFocused` we also need to ensure that the chip actually had focus when it was
+      // deleted so that we don't steal away the user's focus after they've moved on from the chip.
+      const shouldMoveFocus = hasFocus || wasLastFocused;
+
+      if (this._isValidIndex(chipIndex) && shouldMoveFocus) {
         this._lastDestroyedFocusedChipIndex = chipIndex;
       }
     });

src/material/chips/chip.ts

@@ -172,6 +172,9 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   /** Whether the chip list is disabled. */
   _chipListDisabled: boolean = false;
 
+  /** Whether the chip was focused when it was removed. */
+  _hadFocusOnRemove = false;
+
   private _textElement!: HTMLElement;
 
   /**
@@ -316,6 +319,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
    */
   remove(): void {
     if (this.removable) {
+      this._hadFocusOnRemove = this._hasFocus();
       this.removed.emit({chip: this});
     }
   }