ant-design / ant-design/pro-components

🐛[BUG]EditableProTable可编辑表格,如果定义了formItemProps.rules属性,导致select组件在编辑状态下,宽度变窄

Open
#7,531 4 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

### 🐛 bug 描述

EditableProTable可编辑表格,如果定义了formItemProps.rules属性,导致select组件在编辑状态下,宽度变窄

### 📷 复现步骤
1.点击操作按钮的编辑

### 🏞 期望结果

![image](https://github.com/ant-design/pro-components/assets/19543842/9503e26a-d1a4-48e1-8877-f01498da3e70)

### 💻 复现代码
可复现代码地址:https://github.com/yanglei00/pro-components-utils-bug

import React, { useRef } from 'react';
import {
ProForm,
EditableProTable,
} from "@ant-design/pro-components";

export default () => {
const actionRef = useRef();
return (

[
{
actionRef.current?.startEditable(row.id);
}}
>
编辑
,
],
},
]}
/>

);
};

### © 版本信息

"@ant-design/pro-components": "^2.6.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"

### 🚑 其他信息

![image](https://github.com/ant-design/pro-components/assets/19543842/8029a780-d669-4038-8e47-216504c3338a)

Contributor guide

Open the contributing guide

Research direction

Start with the provided reproduction repository and inspect EditableProTable's editable rendering for the select column with formItemProps.rules. Compare the select width before and after clicking the edit action, then verify that adding the required rule does not narrow the editing control.

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.