ant-design / ant-design/pro-components

使用 EditableProTable renderFormItem 下拉選單 Select 下添加任一標籤<span> form功能無法正常運作

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

Description

### Reproduction link

### Steps to reproduce
```
{
title: '部門',
width: 150,
dataIndex: "department",
valueType: 'select',
formItemProps: {
rules: [
{
required: true,
message: '必須輸入',
},
],
},
renderFormItem: (dom, {type, defaultRender, ...rest}, form) => {
return (
<>
{/*123*/} //如果加入任一標籤form 功能失效
{
console.warn(val);
console.warn(val);
form.setFieldsValue({department: val})
// setMember(val)
}}
style={{width: '100%'}}
>

)
}
},

({
id: uuidv4(),
type: "1"
}),
}}

editable={{
type: 'multiple',
form: editForm,
editableKeys,
deleteText: "",
actionRender: (row, config, defaultDoms) => {
return (


{
deleteData(row.id);
}}> 刪除


)
},
onValuesChange: (record, recordList) => {
setDataSource(recordList);
},
onChange: setEditableRowKeys,

}}
/>

```
### What is expected?

表單會自動帶入資料,form.validateFields()檢驗正確

### What is actually happening?

renderFormItem Select 中加入任一標籤 ,form 功能無法正常使用

| Environment | Info |
| --- | --- |
| antd | 5.17.3 |
| React | 18.2.0 |
| System | System |
| Browser | google |

https://github.com/ant-design/ant-design/assets/36724474/cb4caa37-f14c-415d-8564-4324ae0dcedd

Contributor guide

Open the contributing guide

Research direction

Start from the EditableProTable column's renderFormItem reproduction with Select and an added wrapper element. Compare form population and form.validateFields() behavior with and without the wrapper, using the provided antd 5.17.3 and React 18.2.0 setup. Done means the wrapped Select continues to receive form data and validation succeeds.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.