ant-design / ant-design/pro-components
🐛[BUG] Conflict between ProTable and DrawerForm
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
scrollToFirstError or form.scrollToField("field") do not work when a page contains both DrawerForm and ProTable with a column dataIndex matching one of the fields name attribute.
Codesandbox Example : [https://codesandbox.io/s/quirky-paper-nnlwfx?file=/App.tsx](https://codesandbox.io/s/quirky-paper-nnlwfx?file=/App.tsx)
If I change first row of columns to ```{ dataIndex: "name2" ... }``` scrolling works again.
If I also set a different key as follow : ```{ dataIndex: "name", key: "_name" }``` scrolling works again, but doing this will use the key "_name" in ProTable request filters, and also in EditableProTable (submitted data will use key instead of dataIndex which is unwanted).
What we do to fix this at the moment is using a key as follow ```{ key: '${unique_id}${field} }``` and remove that unique_id later when submitting Editable row in or in request's filters which is hacky and prone to errors.
Is there any other way to fix this issue ?
Contributor guide
Research direction
Reproduce the conflict using the linked CodeSandbox App.tsx, focusing on ProTable and DrawerForm fields with matching dataIndex and name values. Trace the scrollToFirstError and form.scrollToField behavior, then verify that scrolling works without changing the data keys used in ProTable filters or EditableProTable submissions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100