ant-design / ant-design/pro-components

🐛[BUG] ProForm ProFormText 表单触发校验失败时,页面会闪烁

Open
#8,956 3 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 描述

```tsx
import { ProForm, ProFormText } from "@ant-design/pro-components";
```
使用 ProFormText 组件在触发表单校验会让页面闪一下

![ProFormText 组件校验闪烁 bug](https://raw.githubusercontent.com/Gilinfen/pro-form-text-bug/refs/heads/main/bug.gif)

### 📷 复现步骤

直接使用 ProFormText 组件就会有

demo 仓库地址 - https://github.com/Gilinfen/pro-form-text-bug

### 🏞 期望结果

期望没有闪烁

### 💻 复现代码

```tsx
import { ProForm, ProFormText } from "@ant-design/pro-components";

const AddAppAcc = () => {
return (



);
};

export default AddAppAcc;
```

### © 版本信息

- "@ant-design/pro-components": "^2.8.3"
- "antd": "^5.23.0"
- "react": "^18.3.1"
- "react-dom": "^18.3.1"
- Chrome 版本 131.0.6778.205(正式版本) (arm64)
- node v20.15.1
- [MacOS]

Contributor guide

Open the contributing guide

Research direction

Start by running the provided ProFormText reproduction from the linked demo repository with the reported React, antd, and @ant-design/pro-components versions, then trace the ProFormText validation entry point. Done means triggering the required-field validation no longer causes the page to flash.

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.