feat(autocomplete): allow panel to have a width value of auto

For scenarios when the width of autocomplete panel needs to exceed the
width of its input (host) in order to display the full text of each
option.

Fixes #11773

Author: dgsmith2

src/lib/autocomplete/autocomplete-trigger.ts

@@ -523,13 +523,13 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       if (this._viewportRuler) {
         this._viewportSubscription = this._viewportRuler.change().subscribe(() => {
           if (this.panelOpen && this._overlayRef) {
-            this._overlayRef.updateSize({width: this._getHostWidth()});
+            this._overlayRef.updateSize({width: this._getWidth()});
           }
         });
       }
     } else {
       // Update the panel width and direction, in case anything has changed.
-      this._overlayRef.updateSize({width: this._getHostWidth()});
+      this._overlayRef.updateSize({width: this._getWidth()});
     }
 
     if (this._overlayRef && !this._overlayRef.hasAttached()) {
@@ -553,7 +553,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     return new OverlayConfig({
       positionStrategy: this._getOverlayPosition(),
       scrollStrategy: this._scrollStrategy(),
-      width: this._getHostWidth(),
+      width: this._getWidth(),
       direction: this._dir
     });
   }
@@ -579,6 +579,10 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element;
   }
 
+  private _getWidth(): number | string {
+    return this.autocomplete.panelWidthAuto ? 'auto' : this._getHostWidth();
+  }
+
   /** Returns the width of the input element, so the panel width can match it. */
   private _getHostWidth(): number {
     return this._getConnectedElement().nativeElement.getBoundingClientRect().width;

src/lib/autocomplete/autocomplete.spec.ts

@@ -1922,6 +1922,21 @@ describe('MatAutocomplete', () => {
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(400);
   }));
 
+  it('should have panel width set to auto', () => {
+      const widthFixture = createComponent(SimpleAutocomplete);
+
+      widthFixture.componentInstance.width = 300;
+      widthFixture.detectChanges();
+
+      widthFixture.componentInstance.trigger.autocomplete.panelWidthAuto = true;
+      widthFixture.componentInstance.trigger.openPanel();
+      widthFixture.detectChanges();
+
+      const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+      expect(overlayPane.style.width).toBe('auto');
+  });
+
   it('should show the panel when the options are initialized later within a component with ' +
     'OnPush change detection', fakeAsync(() => {
       let fixture = createComponent(AutocompleteWithOnPushDelay);

src/lib/autocomplete/autocomplete.ts

@@ -126,6 +126,16 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
   }
   private _autoActiveFirstOption: boolean;
 
+  /**
+   * Whether the width of the autocomplete panel is set to 'auto'.  When 'false', the width of the
+   * panel will match the width of the host.
+   */
+  @Input()
+  get panelWidthAuto(): boolean { return this._panelWidthAuto; }
+  set panelWidthAuto(value: boolean) {
+      this._panelWidthAuto = coerceBooleanProperty(value);
+  }
+  private _panelWidthAuto: boolean;
 
   /** Event that is emitted whenever an option from the list is selected. */
   @Output() readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent> =