ant-design / ant-design/pro-components

[问题 | question]下拉菜单Dropdown中使用ModalForm,默认显示

Open
#9,624 0 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🧐 问题描述 | Problem description

Dropdown的menu 是一个ModalForm 组件,默认显示open={true} 不生效

### 💻 示例代码 | Sample code

```js
export default () => {
const [form] = Form.useForm<{ name: string; company: string }>();
const [isOpen, setIsOpen] = useState(true); // 初始化为 true 以默认显示

const items: MenuProps["items"] = [
{
key: "1",
label: (

title="新建表单"
trigger={


新建表单

}
open={isOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => setIsOpen(false),
}}
submitTimeout={2000}
onFinish={async (values) => {
setIsOpen(false); // 提交后关闭模态框
return true;
}}
>


),
},
];
return (

下拉菜单


);
};
```

### 🚑 其他信息 | Other information

[在线demo](https://codesandbox.io/p/sandbox/modal-biao-dan-forked-dvzgfq?file=%2FApp.tsx%3A31%2C20&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxttl38q0006356jbwueoncn%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxttl38q0002356jw3n29eou%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxttl38q0003356jrwc4i3vo%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxttl38q0005356jivpk4avf%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxttl38q0002356jw3n29eou%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxttl38q0001356jiuse2m3y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxtvnzlc0002356jjyh8plnl%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A31%252C%2522startColumn%2522%253A20%252C%2522endLineNumber%2522%253A31%252C%2522endColumn%2522%253A20%257D%255D%252C%2522filepath%2522%253A%2522%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxttl38q0002356jw3n29eou%2522%252C%2522activeTabId%2522%253A%2522clxtvnzlc0002356jjyh8plnl%2522%257D%252C%2522clxttl38q0005356jivpk4avf%2522%253A%257B%2522id%2522%253A%2522clxttl38q0005356jivpk4avf%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxttl38q0004356js6r1rb2n%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clxttl38q0004356js6r1rb2n%2522%257D%252C%2522clxttl38q0003356jrwc4i3vo%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clxttl38q0003356jrwc4i3vo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Contributor guide

Open the contributing guide

Research direction

Reproduce the behavior in the linked CodeSandbox, starting with App.tsx and the ModalForm nested in the Dropdown menu. Check the initial open={isOpen} state and menu interaction; done means the expected default modal visibility is reproduced and the behavior is clarified or corrected.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.