ant-design / ant-design/pro-components

🐛[BUG] ProFormField 如有initialValue,会导致ArrowLeft和ArrowRight不能用

Open
#9,142 1 comment 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 描述

在edit form里,没办法用左右方向键去调整当前输入的位置。
经过debug发现当前event有`defaultPrevented : true`

### 📷 复现步骤

加个listener
```
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key.startsWith('Arrow') && e.defaultPrevented) {
console.log('Arrow key prevented')
console.log(e);
}
};

document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, []);
```

> Add New Record ( 没初始value)
![Image](https://github.com/user-attachments/assets/ee077771-efc3-44e9-9c06-c2f2a7433974)

> Edit Existing Record ( 有初始value )
![Image](https://github.com/user-attachments/assets/37916ffa-4aac-469e-bb42-84161c0c03c1)
![Image](https://github.com/user-attachments/assets/c50df9e4-ca9a-429d-ae9b-059e30ed96be)

### 🏞 期望结果
左右键应该要正常运作,可以调整输入位子

### 💻 复现代码
> Add New Record
```

title='Add New Material'
trigger={
}>
Add Material

}
formRef={formRef}
autoFocusFirstInput
modalProps={{
destroyOnHidden: true,
maskClosable: false,
keyboard: false,
}}
width={850}
>




```

> Edit Existing Record
```

title='Edit Material'
trigger={trigger}
formRef={formRef}
autoFocusFirstInput
modalProps={{
destroyOnHidden: true,
maskClosable: false,
keyboard: false,
}}
width={850}
initialValues={materialService.transformToUpdateMaterialDto(material)}
>




```
>transformToUpdateMaterialDto 没什么特别,也就map dto而已
```
function transformToUpdateMaterialDto(material: MaterialDto): UpdateMaterialDto {
return {
....,
material_apn_desc: material.apnDesc
}
}
```
### © 版本信息
"antd": "^5.25.0",
"@ant-design/pro-components": "^2.8.2",
"react": "^18.3.1",
"vite": "^6.0.2",

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the edit-form case using ModalForm with initialValues and ProFormText, then compare it with the add-new-record case. Trace where keyboard handling affects ArrowLeft and ArrowRight when the field has an initial value; done means both keys move the input caret normally without preventing the event.

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.