fix(material/chips): restoring focus to last chip when pressing backspace (#23136)

In #19700 a flag was introduced whose purpose was to indicate whether focus should be moved from the input to the chips when pressing backspace. The problem is that the flag was only being updated on key presses and on init which means that the state will be incorrect if the value changes programmatically after init.

Fixes #23128.

(cherry picked from commit 6a6712d)

Author: crisbeto

src/material-experimental/mdc-chips/chip-grid.spec.ts

@@ -542,6 +542,20 @@ describe('MDC-based MatChipGrid', () => {
           // It focuses the last chip
           expectLastCellFocused();
         });
+
+        it('should not focus the last chip when pressing BACKSPACE on a non-empty input', () => {
+          const nativeInput = fixture.nativeElement.querySelector('input');
+          nativeInput.value = 'hello';
+          nativeInput.focus();
+          fixture.detectChanges();
+
+          expectNoCellFocused();
+
+          dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
+          fixture.detectChanges();
+
+          expectNoCellFocused();
+        });
       });
     });
 

src/material-experimental/mdc-chips/chip-input.ts

@@ -203,6 +203,7 @@ export class MatChipInput implements MatChipTextControl, AfterContentInit, OnCha
 
   _focus() {
     this.focused = true;
+    this._focusLastChipOnBackspace = this.empty;
     this._chipGrid.stateChanges.next();
   }
 

src/material/chips/chip-input.ts

@@ -189,6 +189,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy, A
 
   _focus() {
     this.focused = true;
+    this._focusLastChipOnBackspace = this.empty;
     this._chipList.stateChanges.next();
   }
 

src/material/chips/chip-list.spec.ts

@@ -566,6 +566,19 @@ describe('MatChipList', () => {
           expect(manager.activeItemIndex).toEqual(chips.length - 1);
         });
 
+        it('should not focus the last chip when pressing BACKSPACE on a non-empty input', () => {
+          const nativeInput = fixture.nativeElement.querySelector('input');
+          nativeInput.value = 'hello';
+          nativeInput.focus();
+          fixture.detectChanges();
+          expect(manager.activeItemIndex).toBe(-1);
+
+          dispatchKeyboardEvent(nativeInput, 'keydown', BACKSPACE);
+          fixture.detectChanges();
+
+          expect(manager.activeItemIndex).toBe(-1);
+        });
+
       });
     });