ant-design / ant-design/pro-components

🐛[BUG] EditableProTable timeRange value resets after selecting both values and clicking Ok button

Open
#8,213 0 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 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.