From c1054b52d117592fc9e0cf097810a11934851fc2 Mon Sep 17 00:00:00 2001
From: GiftLanga <glanga@retrorabbit.co.za>
Date: Wed, 4 Sep 2024 15:58:12 +0200
Subject: [PATCH] fix(material/autocomplete): Add a boolean field to update the
 native input

Adds the `updateNativeInput` field to the autocomplete trigger to update the native input element when the autocomplete is within a form field.

Fixes #29388.
---
 .../chips-autocomplete/chips-autocomplete-example.html    | 1 +
 src/material/autocomplete/autocomplete-trigger.ts         | 8 +++++++-
 tools/public_api_guard/material/autocomplete.md           | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
index b9d6271c95cd..6ee46d5a0d2c 100644
--- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
+++ b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
@@ -18,6 +18,7 @@
       [(ngModel)]="currentFruit"
       [matChipInputFor]="chipGrid"
       [matAutocomplete]="auto"
+      updateNativeInput
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       (matChipInputTokenEnd)="add($event)"
     />
diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index 2652fb99a3db..6971d402ec54 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -234,6 +234,12 @@ export class MatAutocompleteTrigger
   @Input({alias: 'matAutocompleteDisabled', transform: booleanAttribute})
   autocompleteDisabled: boolean;
 
+  /**
+   * Whether the autocomplete should update the native input element only.
+   * When true the autocomplete will not update the value via the form field control.
+   */
+  @Input({transform: booleanAttribute}) updateNativeInput: boolean;
+
   private _initialized = new Subject();
 
   private _injector = inject(Injector);
@@ -709,7 +715,7 @@ export class MatAutocompleteTrigger
   private _updateNativeInputValue(value: string): void {
     // If it's used within a `MatFormField`, we should set it through the property so it can go
     // through change detection.
-    if (this._formField) {
+    if (this._formField && !this.updateNativeInput) {
       this._formField._control.value = value;
     } else {
       this._element.nativeElement.value = value;
diff --git a/tools/public_api_guard/material/autocomplete.md b/tools/public_api_guard/material/autocomplete.md
index 3f134f3b7562..3cc88aa77709 100644
--- a/tools/public_api_guard/material/autocomplete.md
+++ b/tools/public_api_guard/material/autocomplete.md
@@ -192,6 +192,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     // (undocumented)
     static ngAcceptInputType_autocompleteDisabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_updateNativeInput: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
@@ -210,11 +212,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     registerOnTouched(fn: () => {}): void;
     // (undocumented)
     setDisabledState(isDisabled: boolean): void;
+    updateNativeInput: boolean;
     updatePosition(): void;
     // (undocumented)
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; "updateNativeInput": { "alias": "updateNativeInput"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
 }