fix(autocomplete): provide horizontal fallback positions (#18906)

The positions for the autocomplete dropdown are set up assuming that the panel's width will match the input so they don't provide fallbacks along the x axis. Since we have a `panelWidth` input, the consumer might've overwritten the width to something different so we need to provide the fallbacks to ensure that the panel is always inside the viewport.

Fixes #18854.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -694,32 +694,30 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
 
   /** Sets the positions on a position strategy based on the directive's input state. */
   private _setStrategyPositions(positionStrategy: FlexibleConnectedPositionStrategy) {
-    const belowPosition: ConnectedPosition = {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'top'
-    };
-    const abovePosition: ConnectedPosition = {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'bottom',
-
-      // The overlay edge connected to the trigger should have squared corners, while
-      // the opposite end has rounded corners. We apply a CSS class to swap the
-      // border-radius based on the overlay position.
-      panelClass: 'mat-autocomplete-panel-above'
-    };
+    // Note that we provide horizontal fallback positions, even though by default the dropdown
+    // width matches the input, because consumers can override the width. See #18854.
+    const belowPositions: ConnectedPosition[] = [
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
+      {originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top'}
+    ];
+
+    // The overlay edge connected to the trigger should have squared corners, while
+    // the opposite end has rounded corners. We apply a CSS class to swap the
+    // border-radius based on the overlay position.
+    const panelClass = 'mat-autocomplete-panel-above';
+    const abovePositions: ConnectedPosition[] = [
+      {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', panelClass},
+      {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', panelClass}
+    ];
 
     let positions: ConnectedPosition[];
 
     if (this.position === 'above') {
-      positions = [abovePosition];
+      positions = abovePositions;
     } else if (this.position === 'below') {
-      positions = [belowPosition];
+      positions = belowPositions;
     } else {
-      positions = [belowPosition, abovePosition];
+      positions = [...belowPositions, ...abovePositions];
     }
 
     positionStrategy.withPositions(positions);