React Carbon TextInput 在嵌套模态框内无法编辑的解决方案

在 tauri 打包的桌面应用（尤其是 macos）中，react carbon 的 textinput 组件若置于嵌套 modal 内会失去焦点与输入能力；根本原因在于焦点未正确转移到新打开的子模态框，而非状态或事件绑定问题。

在 tauri 打包的桌面应用（尤其是 macos）中，react carbon 的 textinput 组件若置于嵌套 modal 内会失去焦点与输入能力；根本原因在于焦点未正确转移到新打开的子模态框，而非状态或事件绑定问题。

当使用 Carbon Components 构建多层模态交互时，浏览器环境通常能自动处理焦点迁移，但 Tauri 桌面应用（基于 WebView2 或系统 WebKit）对模态栈的焦点管理更为严格：多个同时 open={true} 的 Modal 会导致顶层 Modal 无法获得键盘焦点，从而导致 <TextInput /> 无法响应点击、聚焦及 onChange 事件——这正是你观察到 onChange 完全不触发、输入框看似“冻结”的根本原因。

✅ 正确解法：确保任意时刻仅有一个 Modal 处于活跃状态

Carbon Modal 的设计初衷是单例式模态体验。嵌套模态并非官方推荐模式，而 Tauri 环境下更需显式控制模态生命周期。解决方案不是修改 TextInput 属性（如 autoFocus、tabIndex 或 defaultValue），而是关闭父模态框，再打开子模态框，确保焦点自然落入新 Modal 的可聚焦元素（如 TextInput）：

const onClickAddAddress = () => {  setShowAddAddressModal(true); // 打开添加地址模态框  setShowFirstModal(false);     // 关键：立即关闭设置模态框};const addAddress = () => {  // 保存地址逻辑  console.log("Adding address:", address);  setShowAddAddressModal(false); // 关闭当前模态框  // 如需返回设置页，可在此重新开启（谨慎使用）  // setShowFirstModal(true);};

⚠️ 注意事项与最佳实践

• 不要依赖 autoFocus：Carbon 的 <TextInput /> 即使设置了 autoFocus={true}，在嵌套且父 Modal 仍 open 的情况下仍无法获得焦点。
• 避免 passiveModal 嵌套：passiveModal 本身禁用背景遮罩与焦点捕获，与子 Modal 共存时极易引发焦点丢失；如需“非阻断式”交互，请改用 InlineNotification 或抽屉式 SideNav 等替代方案。
• Tauri 特别提示：macOS 上 WebView 渲染层对 z-index 和 focus() 调用更敏感。建议在 useEffect 中延迟聚焦（仅作备用）：

  useEffect(() => {  if (showAddAddressModal) {    const timer = setTimeout(() => {      const input = document.getElementById('address-text') as HTMLInputElement;      input?.focus();    }, 100);    return () => clearTimeout(timer);  }}, [showAddAddressModal]);

• 升级 Carbon 版本：确认使用 @carbon/react ≥ v2.0（推荐 v2.10+），旧版 carbon-components-react 对 Tauri 的 window.focus() 行为兼容性较差。

✅ 总结

该问题本质是桌面 WebView 环境下模态焦点栈管理缺陷，而非 React 状态或事件绑定错误。唯一健壮、跨平台兼容的修复方式是：始终保证同一时间只有一个 Modal open={true}。通过 setShowFirstModal(false) 主动退出父模态，不仅解决 TextInput 不可编辑问题，也符合 WCAG 2.1 焦点顺序规范与 Carbon 设计系统语义。后续如需复杂流程（如向导式多步表单），建议采用单 Modal + 动态 Tab/Step 切换，而非物理嵌套 Modal。