ant-design / ant-design/pro-components

🐛[BUG] Conflict between ProTable and DrawerForm

Open
#7,637 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.