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 来进行元素定位。