fix(material/autocomplete): Prevent Autocomplete overlap with outlined form-field label when overlay is positioned above

Fixed by preventing Autocomplete overlap with outlined form-field label when overlay is positioned above. Implemented a function to calculate the necessary vertical offset for outlined appearance, ensuring label legibility.

Fix #27476

Author: kharazian

src/material/autocomplete/autocomplete-trigger.ts

@@ -830,9 +830,20 @@ export class MatAutocompleteTrigger
     // the opposite end has rounded corners. We apply a CSS class to swap the
     // border-radius based on the overlay position.
     const panelClass = this._aboveClass;
+
+    // Calculate vertical overlay offset with outline, or set to 0.
+    const offsetY = this._formField?._getOverlayOffsetOutlined() || 0;
+
     const abovePositions: ConnectedPosition[] = [
-      {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', panelClass},
-      {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', panelClass},
+      {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        panelClass,
+        offsetY,
+      },
+      {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', panelClass, offsetY},
     ];
 
     let positions: ConnectedPosition[];

src/material/form-field/form-field.ts

@@ -503,6 +503,16 @@ export class MatFormField
     return this.appearance === 'outline';
   }
 
+  /**
+   * Calculate the vertical offset for the overlay when the input field has an outline appearance.
+   * In the outline appearance, the overlay should have extra space to display the label correctly.
+   * This function calculates the vertical offset needed.
+   */
+  _getOverlayOffsetOutlined() {
+    const outlineHeight = this._floatingLabel?.element.getBoundingClientRect().height || 0;
+    return this._hasOutline() ? -outlineHeight / 2 : 0;
+  }
+
   /**
    * Whether the label should display in the infix. Labels in the outline appearance are
    * displayed as part of the notched-outline and are horizontally offset to account for