ant-design / ant-design/pro-components
🐛[BUG] EditableProTable timeRange value resets after selecting both values and clicking Ok button
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
EditableProTable timeRange value resets after selecting both values and clicking Ok button
### 📷 复现步骤
- Open [this codesandbox](https://codesandbox.io/p/sandbox/distracted-rain-wj6w4z?file=%2Fsrc%2FApp.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltgennp700063b6fx5kwa64i%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltgennp700023b6fyg0apkzm%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltgennp700033b6fbtpbd23p%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltgennp700053b6fai567djp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltgennp700023b6fyg0apkzm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltgennp600013b6ff5rnyj4g%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cltgf5jvv00023b6fgy670439%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cltgennp700023b6fyg0apkzm%2522%252C%2522activeTabId%2522%253A%2522cltgf5jvv00023b6fgy670439%2522%257D%252C%2522cltgennp700053b6fai567djp%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltgennp700043b6fuvpym8mh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltgennp700053b6fai567djp%2522%252C%2522activeTabId%2522%253A%2522cltgennp700043b6fuvpym8mh%2522%257D%252C%2522cltgennp700033b6fbtpbd23p%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltgennp700033b6fbtpbd23p%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A20.015455636223138%257D).
- Click on Add button
- Select times and click ok.
- The times are removed one after another.
### 🏞 期望结果
Selected time are not removed
### 💻 复现代码
```jsx
import React from "react";
import { EditableProTable } from "@ant-design/pro-components";
export default function App() {
const [dataSource, setDataSource] = React.useState([]);
const columns = [
{
key: "times",
dataIndex: "times",
valueType: "timeRange",
fieldProps: {
changeOnBlur: true,
format: "HH:mm",
minuteStep: 15,
order: false,
},
formItemProps: {
rules: [
{
required: true,
message: "Required",
},
],
},
},
];
return (
<>
{JSON.stringify(dataSource)}
);
}
```
### © 版本信息
- ProComponents 版本: [e.g. 2.6.49]
- 浏览器环境: Firefox, Chrome, Arc
- 开发环境 mac OS
### 🚑 其他信息
My code was working before. I guess this occurred after an update.
Contributor guide
Research direction
Start with the linked CodeSandbox's src/App.js and reproduce the issue using EditableProTable with the timeRange column and changeOnBlur enabled. Trace what happens after selecting both times and clicking Ok; done means the selected times remain in dataSource instead of being removed one after another. Add a regression test for this interaction if the relevant test entry point can be located.
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
- 42/100