Reactstrap Modal在iOS编辑状态下点击textarea自动关闭问题求助

该问题是iOS Safari虚拟键盘唤起时触发视口偏移、事件坐标计算异常，与reactstrap Modal自带的焦点管理、点击区域判定逻辑冲突导致。编辑场景下textarea存在预设内容，focus时需要触发键盘弹起，比新建场景（空textarea）更容易触发该冲突，即使配置了静态打开模式仍可能异常触发关闭逻辑。

• 先确认Modal同时配置静态背景和禁用键盘关闭能力，仅配置单条属性不生效：

<Modal
  backdrop="static"
  keyboard={false}
  {/* 其余原有属性保持不变 */}
>

• 关闭Modal自带的焦点锁定逻辑，reactstrap Modal默认开启的autoFocus和enforceFocus属性，在iOS下和键盘唤起的焦点切换逻辑冲突会异常触发关闭：

<Modal
  backdrop="static"
  keyboard={false}
  autoFocus={false}
  enforceFocus={false}
>

• 添加全局样式约束，避免iOS键盘唤起时Modal和页面滚动导致的坐标判定异常：

/* 固定Modal位置，避免偏移 */
.modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Modal打开时禁止body滚动 */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

• 兜底方案：手动拦截onHide事件，判断当前激活元素是否在Modal内部，再决定是否允许关闭：

const handleModalClose = (e) => {
  const modalDom = document.getElementById('your-comment-modal-id');
  const activeDom = document.activeElement;
  // 若当前焦点在Modal内的textarea上，阻止关闭
  if (modalDom?.contains(activeDom) && activeDom.tagName === 'TEXTAREA') {
    e.preventDefault();
    e.stopPropagation();
    return;
  }
  // 其他场景执行原有关闭逻辑
  originalCloseLogic();
}

<Modal
  id="your-comment-modal-id"
  backdrop="static"
  keyboard={false}
  autoFocus={false}
  enforceFocus={false}
  onHide={handleModalClose}
>

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