Ionic 5 iOS端模态框键盘弹出时dismiss关闭按钮失效问题

该异常为iOS端WebView的原生交互逻辑导致：系统键盘弹出状态下，首次点击非输入区域的操作会被系统优先拦截，用于触发输入框失焦、回收键盘，对应位置绑定的点击事件不会被触发，因此需要二次点击才能执行模态框关闭逻辑。

• 方案1：主动控制键盘收起时序
  引入原生键盘插件，先主动收起键盘，等待动画完成后再关闭模态框：

  // Capacitor项目导入Keyboard
  import { Keyboard } from '@capacitor/keyboard';
  // Cordova项目使用cordova-plugin-ionic-keyboard对应导入即可
  
  async dismissModal() {
    await Keyboard.hide();
    // 适配iOS键盘收起的200ms以内动画时长，避免关闭动作被拦截
    setTimeout(() => {
      this.modalController.dismiss();
    }, 100);
  }
  

• 方案2：使用touchend事件替代click事件
  iOS端触摸结束事件的优先级高于系统失焦拦截逻辑，不会被事件拦截机制吞掉：
  模板部分修改：

  <ion-button (touchend)="dismissModal($event)">关闭模态框</ion-button>
  

  逻辑部分修改：

  dismissModal(e: Event) {
    e.preventDefault();
    this.modalController.dismiss();
  }
  

• 方案3：全局关闭Ionic自动失焦配置
  在项目根模块的Ionic初始化配置中关闭默认输入失焦逻辑：

  imports: [
    IonicModule.forRoot({
      inputBlurring: false,
      scrollAssist: false
    })
  ]
  

  该配置会禁用Ionic自带的输入框自动失焦逻辑，避免点击按钮时被系统优先捕获点击事件。

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