ant-design / ant-design/pro-components

🐛[BUG]使用ModalForm加ProFormText渲染弹框表单,出现校验信息导致表单项高度变化的问题

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

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

使用ModalForm加ProFormText渲染弹框表单,当进行表单校验,错误信息出现或消失时,表单Item会高度变化,

我分析了官方demo,和我渲染的内容的dom,发现
官方demo渲染提示信息时,外层有一个div包裹,而我渲染的则没有,这个就是问题的原因

缺少了样式style="width: 0px; height: 24px;"

### 📷 复现步骤

### 🏞 期望结果

表单在校验信息出现和消失时,表单高度不会变化

### 💻 复现代码

title={id ? t({ id: 'F.编辑企业' }) : t({ id: 'F.添加企业' })} formRef={formRef} open={visible} onOpenChange={(v) => setVisible(v)} width="540px" onFinish={onFinish} >

### © 版本信息

- ProComponents 版本: ^2.8.2
- umi-max 版本:^4.3.36
- 浏览器环境 chrome 最新版本
- 开发环境 node 18
- antd:^5.4.0

### 🚑 其他信息

官方demo截图:
![image](https://github.com/user-attachments/assets/5e08cc95-09f5-44a0-a657-5376cb02676b)

我代码运行的截图:
![image](https://github.com/user-attachments/assets/25d42f41-0d55-44c6-92a2-f5dd6c8c06c8)

Contributor guide

Open the contributing guide

Research direction

Start with the supplied reproduction using ModalForm and ProFormText, then compare its validation-message DOM with the official demo. The work is done when showing or hiding validation errors no longer changes the form item's height.

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.