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 #28065

Author: mistrykaran91

Diff for: goldens/material/chips/index.api.md

@@ -165,6 +165,7 @@ export class MatChipGrid extends MatChipSet implements AfterContentInit, AfterVi
     protected _allowFocusEscape(): void;
     _blur(): void;
     readonly change: EventEmitter<MatChipGridChange>;
+    _change(): void;
     get chipBlurChanges(): Observable<MatChipEvent>;
     protected _chipInput: MatChipTextControl;
     // (undocumented)

Diff for: src/material/chips/chip-grid.spec.ts

@@ -1013,6 +1013,44 @@ describe('MatChipGrid', () => {
     }));
   });
 
+  describe('chip with form control', () => {
+    let fixture: ComponentFixture<ChipsFormControlUpdate>;
+    let component: ChipsFormControlUpdate;
+    let nativeInput: HTMLInputElement;
+    let nativeButton: HTMLButtonElement;
+
+    beforeEach(() => {
+      fixture = createComponent(ChipsFormControlUpdate);
+      component = fixture.componentInstance;
+      nativeInput = fixture.nativeElement.querySelector('input');
+      nativeButton = fixture.nativeElement.querySelector('button[id="save"]');
+    });
+
+    it('should update the form control value when pressed enter', fakeAsync(() => {
+      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 +1256,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 {
+  keywords = new Array<string>();
+  keywordChipControl = new FormControl();
+
+  constructor() {
+    this.keywordChipControl.setValidators(Validators.required);
+  }
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    if (value) {
+      this.keywords.push(value);
+    }
+
+    event.chipInput.clear();
+  }
+}

Diff for: src/material/chips/chip-grid.ts

@@ -415,6 +415,15 @@ export class MatChipGrid
     }
   }
 
+  /** When called, propagates the changes and mark the field as touched when focus moved outside the chip grid. */
+  _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

Diff for: 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();
     }
   }