平板键盘弹出时mat-option消失问题的解决方法

试试这几个针对性的解决方案：

1. 强制修改Autocomplete的定位策略 #

默认的connectedOverlay定位在键盘弹出导致视口压缩时容易出问题，改成全局定位能让面板始终留在视口内：

先修改模板里的mat-autocomplete：

<mat-autocomplete 
  autoActiveFirstOption 
  #auto="matAutocomplete" 
  [displayWith]="displayProject"
  [overlayPosition]="positionStrategy"
  panelClass="autocomplete-global-panel">
  <mat-option *ngFor="let item of (gefiltered | async); " [value]="item">
    {{item.volledignr}} - {{item.omschrijving}}
  </mat-option>
</mat-autocomplete>

然后在组件类里定义全局定位策略：

import { OverlayPositionBuilder } from '@angular/cdk/overlay';

// 组件内部
positionStrategy: any;

constructor(private overlayPositionBuilder: OverlayPositionBuilder) {
  // 让面板水平居中，距离底部10%的位置显示，可根据需求调整
  this.positionStrategy = this.overlayPositionBuilder
    .global()
    .centerHorizontally()
    .bottom('10%');
}

再补个CSS样式防止面板被截断：

.autocomplete-global-panel {
  max-height: 30vh !important;
  overflow-y: auto;
  z-index: 9999 !important; /* 确保面板在键盘上方 */
}

2. 监听视口变化，强制面板重定位 #

键盘弹出会改变窗口高度，监听这个变化，一旦面板已打开就重新计算位置：

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ViewChild } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';

// 组件内部
@ViewChild('auto') auto!: MatAutocomplete;

ngOnInit() {
  // 防抖监听窗口resize事件（键盘弹出/收起会触发）
  fromEvent(window, 'resize')
    .pipe(debounceTime(100))
    .subscribe(() => {
      if (this.auto.isOpen) {
        this.auto._overlayRef?.updatePosition();
      }
    });
}

注：_overlayRef是私有属性，若担心版本兼容，也可以通过CDK的Overlay服务来操作，不过这个临时方案在大多数场景下够用。

3. 禁止iOS平板的页面滚动偏移 #

iOS Safari在键盘弹出时会自动滚动页面，导致Autocomplete的关联元素错位，可以通过动态修改body定位解决：

import { ViewChild, ElementRef } from '@angular/core';

// 组件内部
@ViewChild('autoInput') autoInput!: ElementRef;
private scrollTop = 0;

ngAfterViewInit() {
  const inputEl = this.autoInput.nativeElement;
  
  inputEl.addEventListener('focus', () => {
    // 记录当前滚动位置
    this.scrollTop = window.scrollY;
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${this.scrollTop}px`;
  });

  inputEl.addEventListener('blur', () => {
    // 恢复页面滚动和定位
    document.body.style.position = '';
    document.body.style.width = '';
    document.body.style.top = '';
    window.scrollTo(0, this.scrollTop);
  });
}

别忘了给input加个模板引用变量：

<input type="text"
       placeholder="Pick one"
       matInput
       #autoInput
       [formControl]="getFormcontrol('project')"
       [matAutocomplete]="auto">

4. 禁用选项自动居中 #

开启disableOptionCentering属性，避免选中选项时面板自动滚动导致的视口冲突：

<mat-autocomplete 
  autoActiveFirstOption 
  #auto="matAutocomplete" 
  [displayWith]="displayProject"
  disableOptionCentering>
  <!-- 选项内容不变 -->
</mat-autocomplete>

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