Skip to content

Commit

Permalink
docs(form): update faq for scrollToFirstError (#43640)
Browse files Browse the repository at this point in the history
* docs(form): update faq for scrollToFirstError

* Update components/form/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: xliez <xliez@foxmail.com>

---------

Signed-off-by: xliez <xliez@foxmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
  • Loading branch information
xliez and afc163 committed Jul 19, 2023
1 parent edd15aa commit 48becf9
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 2 deletions.
8 changes: 7 additions & 1 deletion components/form/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -592,12 +592,18 @@ React can not get correct interaction of controlled component with async value u
}
</style>

### `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.
Expand Down
8 changes: 7 additions & 1 deletion components/form/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -591,12 +591,18 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
}
</style>

### 自定义表单控件 `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 来进行元素定位。
Expand Down

0 comments on commit 48becf9

Please sign in to comment.