From 48becf9cb1a6545faf1d703cb80a03b3fe99bba7 Mon Sep 17 00:00:00 2001 From: xliez Date: Wed, 19 Jul 2023 11:23:13 +0800 Subject: [PATCH] docs(form): update faq for scrollToFirstError (#43640) * docs(form): update faq for scrollToFirstError * Update components/form/index.en-US.md Co-authored-by: afc163 Signed-off-by: xliez --------- Signed-off-by: xliez Co-authored-by: afc163 --- components/form/index.en-US.md | 8 +++++++- components/form/index.zh-CN.md | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 1a044f0b0d..b0e54a345c 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -592,12 +592,18 @@ React can not get correct interaction of controlled component with async value u } -### `scrollToFirstError` and `scrollToField` not working on custom form control? +### `scrollToFirstError` and `scrollToField` not working? + +1. use custom form control See similar issues: [#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994) `scrollToFirstError` and `scrollToField` deps on `id` attribute passed to form control, please make sure that it hasn't been ignored in your custom form control. Check [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js) for solution. +2. multiple forms on same page + +If there are multiple forms on the page, and there are duplicate same `name` form item, the form scroll probably may find the form item with the same name in another form. You need to set a different `name` for the `Form` component to distinguish it. + ### Continue, why not use `ref` to bind element? Form can not get real DOM node when customize component not support `ref`. It will get warning in React Strict Mode if wrap with Class Component and call `findDOMNode`. So we use `id` to locate element. diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 362274a2be..296db83299 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -591,12 +591,18 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互 } -### 自定义表单控件 `scrollToFirstError` 和 `scrollToField` 失效？ +### `scrollToFirstError` 和 `scrollToField` 失效？ + +1. 使用了自定义表单控件 类似问题：[#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994) 滚动依赖于表单控件元素上绑定的 `id` 字段，如果自定义控件没有将 `id` 赋到正确的元素上，这个功能将失效。你可以参考这个 [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js)。 +2. 页面内有多个表单 + +页面内如果有多个表单，且存在表单项 `name` 重复，表单滚动定位可能会查找到另一个表单的同名表单项上。需要给表单 `Form` 组件设置不同的 `name` 以区分。 + ### 继上，为何不通过 `ref` 绑定元素？ 当自定义组件不支持 `ref` 时，Form 无法获取子元素真实 DOM 节点，而通过包裹 Class Component 调用 `findDOMNode` 会在 React Strict Mode 下触发警告。因而我们使用 id 来进行元素定位。