React Carbon TextInput在Tauri嵌套模态框中无法编辑如何修复？

针对你在macOS下使用Tauri打包React+Carbon组件时，嵌套模态框内TextInput无法编辑的问题，以下是几个针对性的修复方案：

方案1：手动聚焦输入框并隔离第一个模态框事件 #

在第二个模态框打开时，强制聚焦TextInput，同时让第一个模态框暂时失去交互能力，避免事件被拦截：

import React, { useState, useEffect, useRef } from "react";
import { Modal, TextInput, Tabs, Tab } from "carbon-components-react";
import { Button, TabList, TabPanel, TabPanels } from "@carbon/react";

function func(props) {
   const [showAddAddressModal, setShowAddAddressModal] = useState(false);
   const [address, setAddress] = useState(props.address);
   const addressInputRef = useRef(null);
   const [firstModalDisabled, setFirstModalDisabled] = useState(false);

   const onAddressChange = (event) => {
        let val = event.target.value;
        setAddress(val);
    };

    const onClickAddAddress = () => {
        setFirstModalDisabled(true);
        setShowAddAddressModal(true);
    };

    const closeAddAddressModal = () => {
        setShowAddAddressModal(false);
        setFirstModalDisabled(false);
    };

    useEffect(() => {
        if (showAddAddressModal && addressInputRef.current) {
            addressInputRef.current.focus();
        }
    }, [showAddAddressModal]);

    return(
        <>
        {showFirstModal && (
            <Modal
                passiveModal
                size="sm"
                open={showFirstModal}
                modalHeading="Settings"
                onRequestClose={closeFirstModal}
                style={firstModalDisabled ? { pointerEvents: 'none', opacity: 0.7 } : {}}
            >
                <Tabs>
                    <TabList>
                        <Tab>Addresses</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel>
                            <div>
                                <Button onClick={onClickAddAddress} size="md">
                                        Add New
                                </Button>
                            </div>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </Modal>
        )}
        {showAddAddressModal && (
             <Modal
                size="md"
                open={showAddAddressModal}
                modalHeading="Add Address"
                primaryButtonText="Add"
                secondaryButtonText="Cancel"
                onRequestClose={closeAddAddressModal}
                onRequestSubmit={addAddress}
             >
                <TextInput
                    id="address-text"
                    labelText="Address"
                    value={address}
                    autoComplete="off"
                    onChange={onAddressChange}
                    ref={addressInputRef}
                 />
            </Modal>
        )}
        </>
    );
}

export default func;

方案2：调整Tauri WebView焦点配置 #

修改tauri.conf.json中的窗口配置，确保WebView正确处理模态框的焦点切换：

{
  "tauri": {
    "windows": [
      {
        "title": "Your App",
        "width": 800,
        "height": 600,
        "focus": true,
        "webview": {
          "focus": true,
          "nativeDialogs": false
        }
      }
    ]
  }
}

方案3：替换嵌套模态框为自定义组件 #

如果Carbon的Modal与Tauri WebView存在深层兼容性问题，改用自定义模态框组件替代第二个模态框：

import React, { useState, useRef, useEffect } from "react";
import { Modal, TextInput, Tabs, Tab } from "carbon-components-react";
import { Button, TabList, TabPanel, TabPanels } from "@carbon/react";

// 自定义模态框组件
const CustomModal = ({ open, onClose, onSubmit, heading, children }) => {
  if (!open) return null;
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }} onClick={onClose}>
      <div style={{
        backgroundColor: '#fff',
        padding: '2rem',
        borderRadius: '8px',
        zIndex: 1001,
        minWidth: '300px',
        onClick: e => e.stopPropagation()
      }}>
        <h3 style={{ margin: '0 0 1.5rem' }}>{heading}</h3>
        {children}
        <div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
          <Button onClick={onClose} size="md">Cancel</Button>
          <Button onClick={onSubmit} size="md" kind="primary">Add</Button>
        </div>
      </div>
    </div>
  );
};

function func(props) {
   const [showAddAddressModal, setShowAddAddressModal] = useState(false);
   const [address, setAddress] = useState(props.address);
   const addressInputRef = useRef(null);

   const onAddressChange = (event) => {
        let val = event.target.value;
        setAddress(val);
    };

    const onClickAddAddress = () => {
        setShowAddAddressModal(true);
    };

    const closeAddAddressModal = () => {
        setShowAddAddressModal(false);
    };

    const addAddress = () => {
        // 你的提交逻辑
        closeAddAddressModal();
    };

    useEffect(() => {
        if (showAddAddressModal && addressInputRef.current) {
            addressInputRef.current.focus();
        }
    }, [showAddAddressModal]);

    return(
        <>
        {showFirstModal && (
            <Modal
                passiveModal
                size="sm"
                open={showFirstModal}
                modalHeading="Settings"
                onRequestClose={closeFirstModal}
            >
                <Tabs>
                    <TabList>
                        <Tab>Addresses</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel>
                            <div>
                                <Button onClick={onClickAddAddress} size="md">
                                        Add New
                                </Button>
                            </div>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </Modal>
        )}
        {showAddAddressModal && (
             <CustomModal
                open={showAddAddressModal}
                onClose={closeAddAddressModal}
                onSubmit={addAddress}
                heading="Add Address"
             >
                <TextInput
                    id="address-text"
                    labelText="Address"
                    value={address}
                    autoComplete="off"
                    onChange={onAddressChange}
                    ref={addressInputRef}
                 />
            </CustomModal>
        )}
        </>
    );
}

export default func;

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