Angular Material Dialog中Google Places Autocomplete下拉定位异常问题

• 基于Angular框架结合Material UI库开发页面，在Dialog内的表单中使用Google Places Autocomplete功能时，滚动Dialog时下拉框位置保持固定，无法跟随输入框同步移动。但在Dialog外部使用完全相同的代码和样式时，下拉框能正常显示在输入框正下方，且全程未对.pac-container做任何定位样式修改。
• 已确认该问题与某Stack Overflow问题完全匹配，且理解了其中“移除top样式后恢复正常”的解决方案，现在想进一步了解：能否将Autocomplete的样式绑定到输入元素而非直接作用在html标签上？

非Dialog场景代码示例 #

TypeScript代码 #

export class AddressTestComponent implements OnInit, AfterViewInit {

    @ViewChild("addressLine1") addressField1: ElementRef;
    @ViewChild("addressLine2") addressField2: ElementRef;
    @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
    addressForm: UntypedFormGroup;

    googleAutocomplete: google.maps.places.Autocomplete;

    constructor(private formBuilder: UntypedFormBuilder) { }

    ngOnInit(): void {
        this.addressForm = this.formBuilder.group(
            {
                addressLine1: ['', Validators.required],
                addressLine2: [''],
                city: ['', Validators.required],
                state: ['', Validators.required],
                zipCode: ['', Validators.required],
                country: ['', Validators.required],
            }
        );
    }

    ngAfterViewInit(): void {
        this.googleAutocomplete = new google.maps.places.Autocomplete(this.addressField1.nativeElement as HTMLInputElement, {
            componentRestrictions: { country: ["us"] },
            fields: ["address_components"],
            types: ["address"]
        });

        this.addressField1.nativeElement.focus();
        this.googleAutocomplete.addListener("place_changed", () => this.autocomplete(this.googleAutocomplete.getPlace()) );
        
    }
}

HTML代码 #

<div>
    <div class="dialog-header">
        <h2>Add a New Address</h2>
        <h2 class="header-closer" (click)="onClose()" >X</h2>
    </div>
    <form [formGroup]="addressForm" (ngSubmit)="onSubmitNewAddress()" class="address-form">
        <div class="address-wrapper">
            <mat-form-field (keydown.escape)="$event.stopPropagation()"
                appearance="fill">
                <mat-label>Address Line 1</mat-label>
                <input matInput #addressLine1 formControlName="addressLine1" required>
            </mat-form-field>
            <mat-form-field appearance="fill">
                <mat-label>Address Line 2 (Optional)</mat-label>
                <input matInput #addressLine2 formControlName="addressLine2">
            </mat-form-field>
            <mat-form-field appearance="fill">
                <mat-label>City</mat-label>
                <input matInput formControlName="city" required>
            </mat-form-field>
            <mat-form-field appearance="fill">
                <mat-label>State</mat-label>
                <input matInput formControlName="state" required>
            </mat-form-field>
            <mat-form-field appearance="fill" style="margin-bottom: 10px;">
                <mat-label>Zip Code</mat-label>
                <mat-hint align="end">{{ zipcode.value.length }} / 5</mat-hint>
                <input matInput #zipcode type="tel" [maxLength]="5" formControlName="zipCode" required>
            </mat-form-field>
            <mat-form-field appearance="fill">
                <mat-label>Country</mat-label>
                <input matInput formControlName="country" required>
            </mat-form-field>
        </div>
        <div class="form-buttons">
            <button mat-raised-button (click)="onClose()">Cancel</button>
            <button mat-raised-button color="primary" type="submit" [disabled]="this.addressForm.invalid">Use This Address</button>
        </div>
    </form>
</div>

SCSS代码 #

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

#map {
    height: 100%;
}

.address-form {
    padding-bottom: 2000px; // for scrolling test
}

.header-closer {
    cursor: pointer;
    color: red;
    margin-top: 30px;
}

.address-wrapper {
    display: flex;
    flex-wrap: wrap;

    mat-form-field {
        margin: 0 15px;
        flex: 1;
    }
}

.form-buttons {

    button {
        margin: 0 5px;
    }

    button:hover {
        background-color: #771f1f;
    }
}

内容的提问来源于stack exchange，提问作者ScienceLuke7