fix(material/autocomplete): panel not visible when opened from multiple triggers (#28843)

Fixes that if one panel is tied to multiple triggers, it ends up becoming invisible because the original trigger resets the state after the next trigger picks it up. These changes avoid the state reset if the trigger has changed.

Fixes #28362.

(cherry picked from commit 2f17c69)

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -309,7 +309,14 @@ export class MatAutocompleteTrigger
       });
     }
 
-    this.autocomplete._isOpen = this._overlayAttached = false;
+    // Only reset if this trigger is the latest one that opened the
+    // autocomplete since another may have taken it over.
+    if (this.autocomplete._latestOpeningTrigger === this) {
+      this.autocomplete._isOpen = false;
+      this.autocomplete._latestOpeningTrigger = null;
+    }
+
+    this._overlayAttached = false;
     this._pendingAutoselectedOption = null;
 
     if (this._overlayRef && this._overlayRef.hasAttached()) {
@@ -331,8 +338,7 @@ export class MatAutocompleteTrigger
 
     // Remove aria-owns attribute when the autocomplete is no longer visible.
     if (this._trackedModal) {
-      const panelId = this.autocomplete.id;
-      removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
+      removeAriaReferencedId(this._trackedModal, 'aria-owns', this.autocomplete.id);
     }
   }
 
@@ -786,6 +792,7 @@ export class MatAutocompleteTrigger
     const wasOpen = this.panelOpen;
 
     this.autocomplete._isOpen = this._overlayAttached = true;
+    this.autocomplete._latestOpeningTrigger = this;
     this.autocomplete._setColor(this._formField?.color);
     this._updatePanelState();
     this._applyModalPanelOwnership();

src/material/autocomplete/autocomplete.ts

@@ -145,6 +145,9 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
   }
   _isOpen: boolean = false;
 
+  /** Latest trigger that opened the autocomplete. */
+  _latestOpeningTrigger: unknown;
+
   /** @docs-private Sets the theme color of the panel. */
   _setColor(value: ThemePalette) {
     this._color = value;

tools/public_api_guard/material/autocomplete.md

@@ -91,6 +91,7 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
     // (undocumented)
     _isOpen: boolean;
     _keyManager: ActiveDescendantKeyManager<MatOption>;
+    _latestOpeningTrigger: unknown;
     // (undocumented)
     static ngAcceptInputType_autoActiveFirstOption: unknown;
     // (undocumented)