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

goldens/material/chips/index.api.md

@@ -187,6 +187,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)

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

@@ -1026,6 +1026,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',
@@ -1234,3 +1272,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();
+  }
+}

src/material/chips/chip-grid.ts

@@ -280,6 +280,11 @@ export class MatChipGrid
       this.stateChanges.next();
     });
 
+    this.chipRemovedChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+      this._change();
+      this.stateChanges.next();
+    });
+
     merge(this.chipFocusChanges, this._chips.changes)
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => this.stateChanges.next());
@@ -423,6 +428,16 @@ export class MatChipGrid
     }
   }
 
+  /** When called, propagates the changes and update the immediately */
+  _change() {
+    if (!this.disabled) {
+      // Timeout is needed to wait for the focus() event trigger on chip input.
+      setTimeout(() => {
+        this._propagateChanges();
+      });
+    }
+  }
+
   /**
    * 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
@@ -493,11 +508,18 @@ export class MatChipGrid
   /** Emits change event to set the model value. */
   private _propagateChanges(): void {
     const valueToEmit = this._chips.length ? this._chips.toArray().map(chip => chip.value) : [];
-    this._value = valueToEmit;
-    this.change.emit(new MatChipGridChange(this, valueToEmit));
-    this.valueChange.emit(valueToEmit);
-    this._onChange(valueToEmit);
-    this._changeDetectorRef.markForCheck();
+
+    if (
+      !this._value ||
+      this._value.length !== valueToEmit.length ||
+      !valueToEmit.every(item => this._value.includes(item))
+    ) {
+      this._value = valueToEmit;
+      this.change.emit(new MatChipGridChange(this, valueToEmit));
+      this.valueChange.emit(valueToEmit);
+      this._onChange(valueToEmit);
+      this._changeDetectorRef.markForCheck();
+    }
   }
 
   /** Mark the field as touched */

src/material/chips/chip-input.ts

@@ -193,6 +193,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   /** Checks to see if the (chipEnd) event needs to be emitted. */
   _emitChipEnd(event?: KeyboardEvent) {
     if (!event || (this._isSeparatorKey(event) && !event.repeat)) {
+      const trimmedValue = this.inputElement.value?.trim();
+      if (!this.empty && trimmedValue) {
+        this._chipGrid._change();
+        this._chipGrid.stateChanges.next();
+      }
       this.chipEnd.emit({
         input: this.inputElement,
         value: this.inputElement.value,