ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.48k stars 8.14k forks source link

🐛[BUG] ModalForm 内的 ProFormText 输入框无法通过方向键移动光标 #9497

Closed mg-chao closed 2 years ago

mg-chao commented 2 years ago

🐛 bug 描述

Dropdown 使用 Menu 作为 overlay 时, Menu.Item 作为 ModalForm 的 trigger 造成 ProFormText 输入框无法通过方向键移动光标。

📷 复现步骤

如描述。

🏞 期望结果

光标应该正常移动。测试时,将 ModalForm 放在其他组件内能正常移动光标。

💻 复现代码

<Card
    extra={
        <Dropdown
            trigger={['hover']}
            overlay={
                <Menu>
                    <ModalForm
                        trigger={
                            <Menu.Item
                                key="edit"
                            >
                                <FormattedMessage id="deviceManagement.edit" />
                            </Menu.Item>
                        }
                    >
                        <ProFormText />
                    </ModalForm>
                </Menu>
            }
        >
            <EllipsisOutlined />
        </Dropdown>
    }
/>

© 版本信息

🚑 其他信息

如果在 Menu 内,将 Button 或 div 作为 trigger,在方向键移动时可观察到 ProFormText 失去焦点。 以上代码应该可以很快的测试出来。

bigmgreen commented 1 year ago

请问你是怎么解决的,我也遇到这个问题了

bigmgreen commented 1 year ago

问题解决方式是,在 form 输入框外围增加 onKeyDown,内容是 event.stopPropagation()

...
const onStop = (event) => {
    event.stopPropagation()
 }

return <div onKeyDown={onStop}><ProFormText /></div>
...