fix(material/chips): chips form control updating value immediately

Currently, when we have chips with form control, the value is updated only when its focused out. This fix will update the value of form control immediately

Fixes angular#28065

Author: mistrykaran91

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

@@ -1013,6 +1013,48 @@ describe('MatChipGrid', () => {
     }));
   });
 
+  describe('chip with form control', () => {
+    let fixture: ComponentFixture<ChipsFormControlUpdate>;
+    let component: ChipsFormControlUpdate;
+    let nativeInput: HTMLInputElement;
+    let nativeButton: HTMLButtonElement;
+    let nativeChipGrid: HTMLElement;
+
+    beforeEach(() => {
+      fixture = createComponent(ChipsFormControlUpdate);
+      component = fixture.componentInstance;
+
+      nativeChipGrid = fixture.debugElement.query(By.css('mat-chip-grid'))!.nativeElement;
+      nativeInput = fixture.nativeElement.querySelector('input');
+      nativeButton = fixture.nativeElement.querySelector('button[id="save"]');
+    });
+
+    it('should update the form control value when pressed enter', fakeAsync(() => {
+      const nativeInput = fixture.nativeElement.querySelector('input');
+      nativeInput.value = 'hello';
+      nativeInput.focus();
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(document.activeElement!, 'keydown', ENTER);
+      fixture.detectChanges();
+      flush();
+
+      expect(component.keywordChipControl.value).not.toBeNull();
+      expect(component.keywordChipControl.value.length).toBe(1);
+      expect(nativeButton.disabled).toBeFalsy();
+
+      nativeInput.value = 'how are you ?';
+      nativeInput.focus();
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(document.activeElement!, 'keydown', ENTER);
+      fixture.detectChanges();
+      flush();
+
+      expect(component.keywordChipControl.value.length).toBe(2);
+    }));
+  });
+
   function createComponent<T>(
     component: Type<T>,
     direction: Direction = 'ltr',
@@ -1218,3 +1260,37 @@ class ChipGridWithRemove {
     this.chips.splice(event.chip.value, 1);
   }
 }
+
+@Component({
+  template: `
+<mat-form-field>
+      <mat-label>Keywords</mat-label>
+      <mat-chip-grid #chipGrid [formControl]="keywordChipControl">
+      @for (keyword of keywords; track keyword) {
+        <mat-chip-row>{{keyword}}</mat-chip-row>
+      }
+      </mat-chip-grid>
+      <input placeholder="New keyword..." [matChipInputFor]="chipGrid" (matChipInputTokenEnd)="add($event)">
+    </mat-form-field>
+    <button id="save" [disabled]="!keywordChipControl.valid">Save</button>
+    <button >Cancel</button>`,
+  standalone: false,
+})
+class ChipsFormControlUpdate {
+  public keywords = new Array<string>();
+  public keywordChipControl = new FormControl();
+
+  constructor() {
+    this.keywordChipControl.setValidators(Validators.required);
+  }
+
+  public add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    if (value) {
+      this.keywords.push(value);
+    }
+
+    event.chipInput.clear();
+  }
+}

src/material/chips/chip-grid.ts

@@ -415,6 +415,14 @@ export class MatChipGrid
     }
   }
 
+  _change() {
+    // Timeout is needed to wait for the focus() event trigger on chip input.
+    setTimeout(() => {
+      this._propagateChanges();
+      this._markAsTouched();
+    });
+  }
+
   /**
    * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
    * user to tab out of it. This prevents the grid from capturing focus and redirecting

src/material/chips/chip-input.ts

@@ -198,7 +198,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
         value: this.inputElement.value,
         chipInput: this,
       });
-
+      this._chipGrid._change();
+      this._chipGrid.stateChanges.next();
       event?.preventDefault();
     }
   }