fix(material/autocomplete): autocomplete panel top cut off in landsca…

…pe mode

Fixes a bug in the Angular Material Autocomplete component where the
autocomplete panel listbox is cut off by the device screen when being
viewed in landscape mode. This is because the CDK overlay does not
adjust its size based on the screen constraints when triggered.

Fixes b/284148377

src/material/autocomplete/autocomplete-trigger.ts

@@ -883,7 +883,9 @@ export class MatAutocompleteTrigger
  const strategy = this._overlay
  .position()
  .flexibleConnectedTo(this._getConnectedElement())
- .withFlexibleDimensions(false)
+ .withFlexibleDimensions(true)
+ .withGrowAfterOpen(true)
+ .withViewportMargin(8)
  .withPush(false);
 
  this._setStrategyPositions(strategy);

src/material/autocomplete/autocomplete.scss

@@ -54,10 +54,3 @@ div.mat-mdc-autocomplete-panel {
 mat-autocomplete {
  display: none;
 }
-
-// Prevents autocomplete panel from being cut-off from being viewed in landscape orientation.
-@media all and (orientation: landscape) {
- div.mat-mdc-autocomplete-panel {
- max-height: 55vh;
- }
-}