feat: support preventScroll to focus methods (#953)

* feat: support preventScroll to focus methods

* docs: add preventScroll to API list

content/input/cascader/index-en-US.md

@@ -1549,6 +1549,7 @@ function Demo() {
 | multiple | Set multiple | boolean | false |  1.28.0 |
 | placeholder        | Placeholder                                                                                                                  | string                                                               | -                               | -       |
 | prefix             | Prefix label                                                                                                                 | ReactNode                                                            | -                               | 0.28.0  |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 |restTagsPopoverProps |The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     |PopoverProps     | {}        |1.28.0|
 | searchPlaceholder  | Placeholder for search input                                                                                                 | string                                                               | -                               | -       |
 | separator  | Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection        | string                                                               | ' / '                               | 2.2.0       |

content/input/cascader/index.md

@@ -1536,6 +1536,7 @@ function Demo() {
 | multiple | 设置多选 | boolean | false |  1.28.0 |
 | placeholder        | 选择框默认文字                                                                       | string                                                                           | -                                | -      |
 | prefix             | 前缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0 |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 |restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps     | {}        |1.28.0|
 | searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                           | -                                | -      |
 | separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                           | ' / '                                | 2.2.0      |

content/input/checkbox/index-en-US.md

@@ -408,6 +408,7 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 | extraId        | id of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id <br/>**provided after v2.11.0**                     | ReactNode         | -      |
 | value          | The value that the checkbox represents in the CheckboxGroup  | any | - |
 | indeterminate  | Set to indeterminate state, style control only               | boolean            | false   |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | onChange       | Callback function when change                                | function(e: Event) | -       |
 
 ### CheckboxGroup

content/input/checkbox/index.md

@@ -390,6 +390,7 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 | extraId        | 副文本的 id，aria-describedby 指向这个 id，若无设置会随机生成一个 id <br/>**v2.11.0 后提供**                     | ReactNode         | -      |
 | value | 该checkbox在CheckboxGroup中代表的value | any | - |
 | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | onChange | 变化时回调函数 | function(e:Event) | - |
 
 ### Checkbox Group

content/input/datepicker/index-en-US.md

@@ -812,6 +812,7 @@ function Demo() {
 | position           | Floating layer position, optional value with [Popover #API Reference · position](/en-US/show/popover#API%20Reference)                                                                 | string                                                                                                                                                                                                    | 'bottomLeft'                                                                          |                           |
 | prefix             | Prefix content                                                                                                                                                                            | string\|ReactNode                                                                                                                                                                                         |                                                                                       |                           |
 | presets            | Date Time Shortcut                                                                                                                                                                        | Array < {start: string\|Date\|number, end: string\|Date\|number, text: string}\| function(): {start: string\|Date\|number, end: string\|Date\|number, text: string} >                                     | []                                                                                    |                           |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | rangeSeparator     | Custom range type picker separator of input trigger | string | '~' | **1.31.0** 
 | renderDate         | Custom date display content                                                                                                                                                               | (dayNumber, fullDate) => ReactNode                                                                                                                                                                        | -                                                                                     | **1.4.0**            |
 | renderFullDate     | Custom display date box                                                                                                                                                                   | (dayNumber, fullDate, dayStatus) => ReactNode                                                                                                                                                             | -                                                                                     | **1.4.0**            |

content/input/datepicker/index.md

@@ -776,6 +776,7 @@ function Demo() {
 | position | 浮层位置，可选值同[Popover#API 参考·position 参数](/zh-CN/show/popover#API参考) | string | 'bottomLeft' |  |
 | prefix | 前缀内容 | string\|ReactNode |  |  |
 | presets | 日期时间快捷方式 | Array<{start:BaseValueType, end:BaseValueType, text:string}\| function():{start:BaseValueType, end:BaseValueType, text:string}> | [] |  |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | rangeSeparator | 自定义范围类型输入框的日期分隔符 | string | '~' | **1.31.0** |
 | renderDate | 自定义日期显示内容 | (dayNumber, fullDate) => ReactNode | - | **1.4.0** |
 | renderFullDate | 自定义显示日期格子内容 | (dayNumber, fullDate, dayStatus) => ReactNode | - | **1.4.0** |

content/input/input/index-en-US.md

@@ -405,6 +405,7 @@ Answers to some questions:
 | mode              | The mode of the input box. The optional value is `password`                                   | string                          |           |
 | mode              | mode of input，optional: `password` **>= v1.3.0**                                              | string                          |           |
 | prefix            | Prefix                                                                                        | ReactNode                       |           |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | showClear         | Show clear button **>=1.0.0**                                                                 | boolean                         | false     |
 | size              | Size, one of `large`, `default`, `small`                                                      | string                          | `default` |
 | style             | Inline style                                                                                  | CSSProperties                   |           |
@@ -439,6 +440,7 @@ Answers to some questions:
 | getValueLength    | Custom calculated character string length                                                                              | (value: string) => number       |         |
 | maxCount          | The maximum number of characters and display count                                                                     | number                          | -       |
 | placeholder       | Content to be appear by default                                                                                        | string                          | -       |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | readonly          | Read-only, not editable                                                                                                | boolean                         | false   |
 | rows              | The number of visible text lines for the control.                                                                      | number                          | 4       |
 | showClear         | Display the clear button when the input box has content and hover or focus **>=1.30.0**                                                                                         | boolean                         | false   |

content/input/input/index.md

@@ -414,6 +414,7 @@ import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
 | hideSuffix     | 清除按钮与后缀标签并存时隐藏后缀标签，默认为false两者并列        | boolean                         | false     |
 | mode           | 输入框的模式，可选值password **>=v1.3.0**                        | string                          |           |
 | prefix         | 前缀标签                                                        | ReactNode               |           |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | showClear      | 输入框有内容且 hover 或 focus 时展示清除按钮 **>=1.0.0**                                            | boolean                         | false     |
 | size           | 输入框大小，large、default、small                                  | string                          | 'default' |
 | style          | 样式                                                            | CSSProperties                          |           |

content/input/inputnumber/index-en-US.md

@@ -217,6 +217,7 @@ function Demo () {
 | prefixCls    | Prefix content                                                                                  | string\|ReactNode                 |           |            |
 | pressInterval| How often will the click event be triggered when the button is long pressed, in milliseconds                                   | number                 |   250        |           |
 | pressTimeout | When the button is long pressed, how long will the click event be triggered after the delay, in milliseconds                                               | number                 |     250      |           |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | shiftStep    | Step size for pressing the shift key, it can be a decimal. The default value was adjusted from 1 to 10 in v2.13                     | number                            | 10         | **1.5.0** |
 | showClear    | Do you show the clear button?                                                                   | boolean                           | false     | **0.35.0** |
 | size         | Enter box size, optional value: "default"\|"small"\|"large"                                     | string                            | 'default' |            |

content/input/inputnumber/index.md

@@ -191,6 +191,7 @@ function Demo () {
 | prefixCls    | 前缀内容                                                       | string\|ReactNode                 |           |           |
 | pressInterval| 长按按钮时，多久触发一次点击事件，单位毫秒                                   | number                 |   250        |           |
 | pressTimeout | 长按按钮时，延迟多久后触发点击事件，单位毫秒                                                      | number                 |     250      |           |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | shiftStep    | 按住 shift 键每次改变步数，可以为小数，v2.13 默认值由 1 调整为 10                           | number                            | 10         | **1.5.0** |
 | showClear    | 是否显示清除按钮                                               | boolean                           | false     | **0.35.0**   |
 | size         | 输入框大小，可选值："default"\|"small"\|"large"                | string                            | 'default' |           |

content/input/radio/index-en-US.md

@@ -388,6 +388,7 @@ class App extends React.Component {
 | extra | Extra information displayed <br/>**provided after v0.25.0** | ReactNode | - |
 | extraId        | id of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id <br/>**provided after v2.11.0**                     | ReactNode         | -      |
 | mode | In advanced mode, options can be clicked to uncheck, one of `advanced` | string | - |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | style | Inline style | CSSProperties |  |
 | value | Compared based on value to determine whether the option is selected | string \| number | - |
 | onChange | Callback function when the selected option changes | Function (e: Event) | - |

content/input/radio/index.md

@@ -334,6 +334,7 @@ class App extends React.Component {
 | extra          | 副文本，只对type='default'生效<br/>**v0.25.0 后提供**                     | ReactNode         | -      |
 | extraId        | 副文本的 id，aria-describedby 指向这个 id，若无设置会随机生成一个 id <br/>**v2.11.0 后提供**                     | ReactNode         | -      |
 | mode           | 高级和普通模式，高级模式可以在 checked 时点击变成 unchecked，可选值 advanced   | string            | -      |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | style          | 内联样式                                                                 | CSSProperties    |        |
 | value          | 根据 value 进行比较，判断是否选中                                          | string \| number               | -      |
 | onChange       | 选项变化时的回调函数                                                      | function(e:Event) | -      |

content/input/rating/index-en-US.md

@@ -168,15 +168,16 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | count         | Number of stars or characters                                                         | number                  | 5                                        |
 | defaultValue  | Default value                                                                         | number                  | 0                                        |
 | disabled      | Read-only, disable interaction.                                                       | boolean                 | false                                    |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
+| size          | Size, one of `default`, `small`, **v >= 0.35.0** could use number for customized size | string\| number         | `default`                                |
+| style         | Inline style                                                                          | object                  | -                                        |
+| tooltips      | Customize prompted information for each item                                          | String[]                | -                                        |
+| value         | Controlled value                                                                      | number                  | -                                        |
 | onBlur        | Callback function when losing focus.                                                  | function()              | -                                        |
 | onChange      | Callback function at the time of selection                                            | function(value: number) | -                                        |
 | onFocus       | Callback function when getting focus                                                  | function()              | -                                        |
 | onHoverChange | Callback function of numerical changes when the mouse hovers                          | function(value: number) | -                                        |
 | onKeyDown     | Callback function when key down                                                       | function(e: event)      | -                                        |
-| size          | Size, one of `default`, `small`, **v >= 0.35.0** could use number for customized size | string\| number         | `default`                                |
-| style         | Inline style                                                                          | object                  | -                                        |
-| tooltips      | Customize prompted information for each item                                          | String[]                | -                                        |
-| value         | Controlled value                                                                      | number                  | -                                        |
 
 ## Accessibility
 

content/input/rating/index.md

@@ -145,15 +145,16 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | count | star 总数 | number | 5 |
 | defaultValue | 默认值 | number | 0 |
 | disabled | 只读，无法进行交互 | boolean | false |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
+| size | 尺寸， `default`， `small`，**v >= 0.35.0** 后支持传入 number 类型自定义尺寸 | string \| number | `default` |
+| style | 自定义样式对象 | object | - |
+| tooltips | 自定义每项的提示信息 | string[] | - |
+| value | 当前受控值 | number | - |
 | onBlur | 失去焦点时的回调 | function() | - |
 | onChange | 选择时的回调 | function(value: number) | - |
 | onFocus | 获取焦点时的回调 | function() | - |
 | onHoverChange | 鼠标经过时数值变化的回调 | function(value: number) | - |
 | onKeyDown | 按键回调 | function(e: event) | - |
-| size | 尺寸， `default`， `small`，**v >= 0.35.0** 后支持传入 number 类型自定义尺寸 | string \| number | `default` |
-| style | 自定义样式对象 | object | - |
-| tooltips | 自定义每项的提示信息 | string[] | - |
-| value | 当前受控值 | number | - |
 
 ## Accessibility
 

content/input/select/index-en-US.md

@@ -1309,6 +1309,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | placeholder | placeholder | ReactNode |  |
 | position | Pop-up layer position, refer to [Popover·API reference·position](/en-US/show/popover#API%20Reference) | string | 'bottomLeft' |
 | prefix | An input helper rendered before | ReactNode |  |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | remote | Whether to turn on remote search, when remote is true, the input content will not be locally filtered and matched | boolean | false |
 | renderCreateItem | When allowCreate is true, you can customize the rendering of the creation label | function(inputValue: string) | InputValue => 'Create' + InputValue |
 | renderSelectedItem | Customize the rendering of selected tabs in the selection box | function(option) |  |

content/input/select/index.md

@@ -1335,6 +1335,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | placeholder              | 选择框默认文字                                                                                                                                                                                            | ReactNode                                |                                   |
 | position                 | 菜单展开的位置，可选项同Tooltip position                                                                                                                  | string                                | 'bottomLeft'                      |
 | prefix                   | 选择框的前缀标签                                                                                                                                                                | ReactNode                             |                                   |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | renderCreateItem         | allowCreate 为 true 时，可自定义创建标签的渲染                                                                                                                                 | function(inputValue:string)           | inputValue => '创建' + inputValue |
 | renderSelectedItem       | 通过 renderSelectedItem 自定义选择框中已选项标签的渲染                                                                                                                          | function(option)                      |                                   |
 | renderOptionItem         | 通过 renderOptionItem 完全自定义下拉列表中候选项的渲染                                                                                                                          | function(props) 入参详见Demo                      |                                   |

content/input/taginput/index-en-US.md

@@ -428,6 +428,7 @@ class CustomRender extends React.Component {
 |showContentTooltip |When the tag is too long and truncated, when hovering the tag, whether to display all contents through Tooltip     |boolean    | true        |1.21.0|
 |placeholder   |Content to be appear by default                  |string                                                           | -         |1.19.0|
 |prefix        |Prefix                                           |ReactNode                                                        |-          |1.19.0|
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 |renderTagItem |Customize the rendering of items                 |(value: string, index: number) => React.ReactNode                | -        |1.19.0|
 |separator     |Customize the separator                          |string\|string[]                                                 |,          |1.19.0,string[] is supported since 1.29.0|
 |showClear     |Whether to show the clear button                 |boolean                                                          |false      |1.19.0|

content/input/taginput/index.md

@@ -428,6 +428,7 @@ class CustomRender extends React.Component {
 |showContentTooltip   |当标签长度过长发生截断时，hover 标签的时候，是否通过 Tooltip 显示全部内容     |boolean    | true        |1.21.0|
 |placeholder  |占位默认值                                         |string                         | -         |1.19.0|
 |prefix       |前缀标签                                           |ReactNode                      |-          |1.19.0|
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 |renderTagItem|自定义标签渲染                                      |(value: string, index: number) => React.ReactNode | -        |1.19.0|
 |separator    |设置批量输入时的分隔符                               |string\|string[]                         |,    |1.19.0, string[]是从1.29.0开始支持|
 |showClear    |是否支持一键删除所有标签和输入内容                     |boolean                        |false      |1.19.0|

content/input/timepicker/index-en-US.md

@@ -301,6 +301,7 @@ function Demo(props = {}) {
 | popupStyle | Pop-up layer style object | object | - |
 | position | Floating position | string | type="timeRange" => "bottom"<br/>type="time" => "bottomLeft" |
 | prefixCls | Prefix content | string\|ReactNode |  |  |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | rangeSeparator | time range delimiter | string | "~" |
 | scrollItemProps | The props passed through to ScrollItem. The optional values are the same as [ScrollList#API](/zh-CN/show/scrolllist#ScrollItem) | object |  | **0.31.0** |
 | secondStep | Second option interval | number | 1 |

content/input/timepicker/index.md

@@ -286,6 +286,7 @@ function Demo(props = {}) {
 | popupStyle          | 弹出层样式对象                                         | object                                                                            | -                                                                 |                    |
 | position            | 浮层位置                                               | string                                                                            | type="timeRange"时默认为"bottom"，type="time"时默认为"bottomLeft" |                    |
 | prefixCls              | 前缀内容                                               | string\|ReactNode                                                                 |                                                                   |                    |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | rangeSeparator      | 时间范围分隔符                                         | string                                                                            | " ~ "                                                             |                    |
 | scrollItemProps     | 透传给 scrollItem 的属性，可选值同[ScrollList#API](/zh-CN/show/scrolllist#ScrollItem)                                                | object                                                           | | **0.31.0**         |
 | secondStep          | 秒选项间隔                                             | number                                                                            | 1                                                                 |                    |

content/input/treeselect/index-en-US.md

@@ -1321,6 +1321,7 @@ function Demo() {
 | outerTopSlot| Rendered at the top of the pop-up layer, custom slot level with optionList. If turn on filterTreeNode, it will replace search box as well. You could use static search method to customize instead. |  ReactNode  |  - | 1.9.0|
 | placeholder              | Placeholder for input box                                                           | string                                                            | -           | -       |
 | prefix                   | Prefix                                                                              | ReactNode                                                         | -           | 0.28.0  |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | renderFullLabel | Custom option render function, [Detailed Params and Usage](/en-US/navigation/tree#Advanced%20FullRender) | (obj) => ReactNode | 1.7.0 |
 | renderLabel | Custom label render function | (label:ReactNode, data:TreeNode) => ReactNode | 1.6.0 | 
 | renderSelectedItem | render selected item | Function | - | 1.26.0 | 

content/input/treeselect/index.md

@@ -1302,6 +1302,7 @@ function Demo() {
 | outerTopSlot| 渲染在弹出层顶部，与 optionList 平级的自定义 slot，注意如果开启了 filterTreeNode 会取代搜索框，可以通过 search 方法来自行处理 |  ReactNode  |  - | 1.9.0|
 | placeholder | 选择框默认文字 | string | - | - |
 | prefix | 前缀标签 | ReactNode | - |0.28.0 |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | renderFullLabel | 完全自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#高级定制) | (obj) => ReactNode | - | 1.7.0 | 
 | renderLabel | 自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#自定义节点内容)  | (label:ReactNode, data:TreeNode) => ReactNode | - | 1.6.0 | 
 | renderSelectedItem | 自定义渲染已选项 | Function | - | 1.26.0 | 

content/navigation/tabs/index-en-US.md

@@ -537,6 +537,7 @@ defaultActiveKey | Initialize the key value of the selected tab page | string |
 keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
 lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
 renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
+preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
 style | style object | CSSProperties | None |
 tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |

content/navigation/tabs/index.md

@@ -562,6 +562,7 @@ defaultActiveKey | 初始化选中的 tab 页的 key 值 | string | '1' |
 keepDOM | 使用 TabPane 写法时是否渲染隐藏面板的 DOM 结构，**>=1.0.0** | boolean | true |
 lazyRender | 懒渲染，仅当面板激活过才被渲染在 DOM 树中, **>=1.0.0** | boolean | false |
 renderTabBar | 用于二次封装标签栏 | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | 无 |
+preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 size | 大小，提供 `large`、`medium`、`small` 三种类型，**>=1.11.0，目前仅支持线性 Tabs** | string | `large` |
 style | 样式对象 | CSSProperties | 无 |
 tabBarExtraContent | 用于扩展标签栏的内容 | ReactNode | 无 |

content/navigation/tree/index-en-US.md

@@ -2135,6 +2135,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | loadedKeys | （Controlled）Mark node as loaded, working with `loadData` | string[] | - | 1.0.0|
 | motion              | Toggle whether to turn on animation| boolean                     | true    | - |
 | multiple            | Toggle whether in multi-choice mode| boolean                     | false   | - |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | renderDraggingNode | Custom render function to render html element of dragImg for dragging node | (nodeInstance: HTMLElement, node: TreeNode) => HTMLElement | - | 1.8.0 | 
 | renderFullLabel | Custom option render function | (data: object) => ReactNode | - | 1.7.0 | 
 | renderLabel | Custom label render function | (label: ReactNode, data: TreeNode) => ReactNode | - | 1.6.0 | 

content/navigation/tree/index.md

@@ -2129,6 +2129,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | loadedKeys | （受控）已经加载的节点，配合 loadData 使用 | string[] | - | 1.0.0|
 | motion | 是否开启动画 | boolean | true | - |
 | multiple | 是否支持多选 | boolean | false | - |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | renderDraggingNode | 自定义正在拖拽节点的 dragImg 的 Html 元素 | (nodeInstance: HTMLElement, node: TreeNode) => HTMLElement | - | 1.8.0 | 
 | renderFullLabel | 完全自定义label的渲染函数 | (data: object) => ReactNode | - | 1.7.0 | 
 | renderLabel | 自定义label的渲染函数 | (label: ReactNode, data: TreeNode) => ReactNode |- |  1.6.0 | 

content/show/modal/index-en-US.md

@@ -589,6 +589,7 @@ function Demo(props = {}) {
 | okButtonProps     | Properties for confirm button                      | [ButtonProps](/en-US/input/button#API-reference) | -       |
 | okText            | Text for confirm button                            | string | -       |
 | okType            | Type for confirm button, optional: 'primary'、'secondary'、'tertiary'、'warning'、'danger'                            | string | primary |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | size | Size of modal, one of `small`(448px), `medium`(684px), `large`(920px), `full-width`(100vw - 64px) <br/>**>= v1.0.0**  | string | 'small' |
 | style             | Inline style                                       | CSSProperties | -       |
 | title             | Title                                              | ReactNode | -       |
@@ -630,10 +631,12 @@ function Demo(props = {}) {
 | title             | Title                                              | ReactNode            | -       |
 | width             | Width                                              | number            | 520     |
 | zIndex            | Z-index value for mask                             | number            | 1000    |
-Creating modal with the above methods will return a reference to the instance. You could use it to update or close the modal.|
 | onCancel          | Callback function when clicking cancel button      | (e: any) => void \| Promise<any\>          | -       |
 | onOk              | Callback function when clicking confirm button     | (e: any) => void \| Promise<any\>          | -       |
 
+Creating modal with the above methods will return a reference to the instance. You could use it to update or close the modal.|
+
+
 ```
 const modal = Modal.info();
 

content/show/modal/index.md

@@ -594,6 +594,7 @@ function Demo(props = {}) {
 | okButtonProps     | 确认按钮的 props                 | [ButtonProps](/zh-CN/input/button#API参考) | 无      |
 | okText            | 确认按钮的文字                   | string | 无      |
 | okType            | 确认按钮的类型, 可选: 'primary'、'secondary'、'tertiary'、'warning'、'danger'                   | string | primary |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法，不包含用户传入的组件 | boolean |  |  |
 | size | 对话框宽度尺寸，支持 `small`(448px)， `medium`(684px), `large`(920px)，`full-width`(100vw - 64px) <br/>**v1.0.0 后提供**  | string | 'small' |     
 | style             | 可用于设置样式                   | CSSProperties | 无      |
 | title             | 对话框的标题                     | ReactNode | 无      |

content/show/tooltip/index-en-US.md

@@ -412,6 +412,7 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 | motion | Whether to show the pop-up motion | boolean | true |  |
 | position | Pop-up layer display position, optional value: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
 | prefixCls | The `className` prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip. | string | 'semi-tooltip ' |  |
+| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | rePosKey | This value can be updated to manually trigger the repositioning of the pop-up layer. | string | number |  |
 | style | Pop-up layer inline style | object |  |  |
 | spacing | The distance between the pop-up layer and the `children` element | number |  |  |

content/show/tooltip/index.md

@@ -445,6 +445,7 @@ function Demo() {
 | motion | 是否展示弹出层动画 | boolean\|object | true |  |
 | position | 弹出层展示位置，可选值：`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
 | prefixCls | 弹出层 wrapper div 的 `className` 前缀，设置该项时，弹出层将不再带 Tooltip 的样式 | string | 'semi-tooltip' |  |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | rePosKey | 可以更新该项值手动触发弹出层的重新定位 | string\|number |  |  |
 | style    | 弹出层的内联样式 | object |  |  |
 | spacing | 弹出层与 `children` 元素的距离，单位 px | number | 8 |  |

packages/semi-foundation/cascader/foundation.ts

@@ -145,6 +145,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -170,6 +170,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 
 export default CheckboxFoundation;

packages/semi-foundation/datePicker/foundation.ts

@@ -162,6 +162,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface DatePickerFoundationState {

packages/semi-foundation/modal/modalFoundation.ts

@@ -54,6 +54,7 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface ModalState {

packages/semi-foundation/rating/foundation.ts

@@ -147,13 +147,13 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
     }
 
     changeFocusStar(value: number, event: any) {
-        const { count, allowHalf } = this.getProps();
+        const { count, allowHalf, preventScroll } = this.getProps();
         const index = Math.ceil(value) - 1;
         const starElement = [...event.currentTarget.childNodes].map(item => item.childNodes[0].childNodes);
         if (index < 0) {
-            starElement[count][0].focus();
+            starElement[count][0].focus({ preventScroll });
         } else {
-            starElement[index][allowHalf ? (value * 10 % 10 === 5 ? 0 : 1) : 0].focus();
+            starElement[index][allowHalf ? (value * 10 % 10 === 5 ? 0 : 1) : 0].focus({ preventScroll });
         }
     }
 

packages/semi-foundation/tabs/foundation.ts

@@ -79,6 +79,7 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     }
 
     handleKeyDown = (event: any, itemKey: string, closable: boolean) => {
+        const { preventScroll } = this.getProps();
         const tabs = [...event.target.parentNode.childNodes].filter(item => {
             return get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && get(item, 'attributes.aria-disabled.value', '') !== "true";
         });
@@ -100,11 +101,11 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
                 this.handlePrevent(event);
                 break;
             case "Home":
-                tabs[0].focus(); // focus first tab
+                tabs[0].focus({ preventScroll }); // focus first tab
                 this.handlePrevent(event);
                 break;
             case "End":
-                tabs[tabs.length - 1].focus(); // focus last tab
+                tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
                 this.handlePrevent(event);
                 break;
         }
@@ -128,18 +129,20 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     }
 
     handleDeleteKeyDown(event:any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
+        const { preventScroll } = this.getProps();
         if (closable) {
             this.handleTabDelete(itemKey);
             const index = tabs.indexOf(event.target);
             // Move focus to next element after deletion
             // If the element is the last removable tab, focus to its previous tab
             if (tabs.length !== 1 ){
-                tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();   
+                tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({ preventScroll });
             }
         }
     }
 
     switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void {
+        const { preventScroll } = this.getProps();
         const index = tabs.indexOf(event.target);
 
         const direction = {
@@ -152,11 +155,11 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
         if (direction[event.key]) {
             if (index !== undefined) {
                 if (tabs[index + direction[event.key]]) {
-                    tabs[index+ direction[event.key]].focus();
+                    tabs[index+ direction[event.key]].focus({ preventScroll });
                 } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-                    tabs[tabs.length - 1].focus(); // focus last tab
+                    tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
                 } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
-                    tabs[0].focus(); // focus first tab
+                    tabs[0].focus({ preventScroll }); // focus first tab
                 }
             }
         }

packages/semi-foundation/tooltip/foundation.ts

@@ -887,11 +887,11 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 因此 returnFocusOnClose 只支持 click trigger
      */
     _focusTrigger() {
-        const { trigger, returnFocusOnClose } = this.getProps();
+        const { trigger, returnFocusOnClose, preventScroll } = this.getProps();
         if (returnFocusOnClose && trigger !== 'custom') {
             const triggerNode = this._adapter.getTriggerNode();
             if (triggerNode && 'focus' in triggerNode) {
-                triggerNode.focus();
+                triggerNode.focus({ preventScroll });
             }
         }
     }
@@ -908,30 +908,34 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _handleContainerTabKeyDown(focusableElements: any[], event: any) {
+        const { preventScroll } = this.getProps();
         const activeElement = this._adapter.getActiveElement();
         const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
         if (isLastCurrentFocus) {
-            focusableElements[0].focus();
+            focusableElements[0].focus({ preventScroll });
             event.preventDefault(); // prevent browser default tab move behavior
         }
     }
 
     _handleContainerShiftTabKeyDown(focusableElements: any[], event: any) {
+        const { preventScroll } = this.getProps();
         const activeElement = this._adapter.getActiveElement();
         const isFirstCurrentFocus = focusableElements[0] === activeElement;
         if (isFirstCurrentFocus) {
-            focusableElements[focusableElements.length - 1].focus();
+            focusableElements[focusableElements.length - 1].focus({ preventScroll });
             event.preventDefault(); // prevent browser default tab move behavior
         }
     }
 
     _handleTriggerArrowDownKeydown(focusableElements: any[], event: any) {
-        focusableElements[0].focus();
+        const { preventScroll } = this.getProps();
+        focusableElements[0].focus({ preventScroll });
         event.preventDefault(); // prevent browser default scroll behavior
     }
 
     _handleTriggerArrowUpKeydown(focusableElements: any[], event: any) {
-        focusableElements[focusableElements.length - 1].focus();
+        const { preventScroll } = this.getProps();
+        focusableElements[focusableElements.length - 1].focus({ preventScroll });
         event.preventDefault(); // prevent browser default scroll behavior
     }
 }

packages/semi-foundation/tree/foundation.ts

@@ -219,6 +219,7 @@ export interface BasicTreeProps {
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
     onSearch?: (sunInput: string) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
     renderLabel?: (label?: any, treeNode?: BasicTreeNodeData) => any;

packages/semi-foundation/utils/FocusHandle.ts

@@ -7,6 +7,7 @@ type FocusRedirectListener = (element: HTMLElement) => boolean;
 interface HandleOptions {
     enable?: boolean
     onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[]
+    preventScroll?: boolean;
 }
 
 /*
@@ -85,7 +86,8 @@ class FocusTrapHandle {
     }
 
     private focusElement = (element: HTMLElement, event: KeyboardEvent) => {
-        element?.focus();
+        const { preventScroll } = this.options;
+        element?.focus({ preventScroll });
         event.preventDefault(); // prevent browser default tab move behavior
     }
 

packages/semi-ui/cascader/index.tsx

@@ -168,6 +168,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         disableStrictly: PropTypes.bool,
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -268,15 +269,16 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 this.setState({ inputPlaceHolder: value });
             },
             focusInput: () => {
+                const { preventScroll } = this.props;
                 if (this.inputRef && this.inputRef.current) {
                     // TODO: check the reason
-                    (this.inputRef.current as any).focus();
+                    (this.inputRef.current as any).focus({ preventScroll });
                 }
             },
         };
         const cascaderAdapter: Pick<
-            CascaderAdapter,
-            'registerClickOutsideHandler' | 'unregisterClickOutsideHandler' | 'rePositionDropdown'
+        CascaderAdapter,
+        'registerClickOutsideHandler' | 'unregisterClickOutsideHandler' | 'rePositionDropdown'
         > = {
             registerClickOutsideHandler: cb => {
                 const clickOutsideHandler = (e: Event) => {
@@ -869,22 +871,22 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const classNames = useCustomTrigger
             ? cls(className)
             : cls(prefixcls, className, {
-                  [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
-                  [`${prefixcls}-disabled`]: disabled,
-                  [`${prefixcls}-single`]: true,
-                  [`${prefixcls}-filterable`]: filterable,
-                  [`${prefixcls}-error`]: validateStatus === 'error',
-                  [`${prefixcls}-warning`]: validateStatus === 'warning',
-                  [`${prefixcls}-small`]: size === 'small',
-                  [`${prefixcls}-large`]: size === 'large',
-                  [`${prefixcls}-with-prefix`]: prefix || insetLabel,
-                  [`${prefixcls}-with-suffix`]: suffix,
-              });
+                [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
+                [`${prefixcls}-disabled`]: disabled,
+                [`${prefixcls}-single`]: true,
+                [`${prefixcls}-filterable`]: filterable,
+                [`${prefixcls}-error`]: validateStatus === 'error',
+                [`${prefixcls}-warning`]: validateStatus === 'warning',
+                [`${prefixcls}-small`]: size === 'small',
+                [`${prefixcls}-large`]: size === 'large',
+                [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+                [`${prefixcls}-with-suffix`]: suffix,
+            });
         const mouseEvent = showClear
             ? {
-                  onMouseEnter: () => this.handleMouseOver(),
-                  onMouseLeave: () => this.handleMouseLeave(),
-              }
+                onMouseEnter: () => this.handleMouseOver(),
+                onMouseLeave: () => this.handleMouseLeave(),
+            }
             : {};
         const sectionCls = cls(`${prefixcls}-selection`, {
             [`${prefixcls}-selection-multiple`]: multiple && !isEmpty(checkedKeys),
@@ -892,14 +894,14 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const inner = useCustomTrigger
             ? this.renderCustomTrigger()
             : [
-                  <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
-                  <Fragment key={'selection'}>
-                      <div className={sectionCls}>{this.renderSelectContent()}</div>
-                  </Fragment>,
-                  <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
-                  <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
-                  <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
-              ];
+                <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
+                <Fragment key={'selection'}>
+                    <div className={sectionCls}>{this.renderSelectContent()}</div>
+                </Fragment>,
+                <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
+                <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
+                <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
+            ];
         /**
          * Reasons for disabling the a11y eslint rule:
          * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here

packages/semi-ui/checkbox/checkbox.tsx

@@ -67,6 +67,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         index: PropTypes.number,
         'aria-label': PropTypes.string,
         tabIndex: PropTypes.number,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {

packages/semi-ui/checkbox/checkboxInner.tsx

@@ -26,6 +26,7 @@ export interface CheckboxInnerProps {
     focusInner?: boolean;
     onInputFocus?: (e: any) => void;
     onInputBlur?: (e: any) => void;
+    preventScroll?: boolean;
 }
 
 class CheckboxInner extends PureComponent<CheckboxInnerProps> {
@@ -49,6 +50,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         focusInner: PropTypes.bool,
         onInputFocus: PropTypes.func,
         onInputBlur: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -61,7 +63,8 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     }
 
     focus() {
-        this.inputEntity.focus();
+        const { preventScroll } = this.props;
+        this.inputEntity.focus({ preventScroll });
     }
 
     render() {

packages/semi-ui/datePicker/datePicker.tsx

@@ -125,6 +125,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         // Callback function for panel date switching
         onPanelChange: PropTypes.func,
         rangeSeparator: PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -272,13 +273,14 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
             setMotionEnd: motionEnd => this.setState({ motionEnd }),
             setRangeInputFocus: rangeInputFocus => {
+                const { preventScroll } = this.props;
                 if (rangeInputFocus !== this.state.rangeInputFocus) {
                     this.setState({ rangeInputFocus });
                 }
                 switch (rangeInputFocus) {
                     case 'rangeStart':
                         const inputStartNode = get(this, 'rangeInputStartRef.current');
-                        inputStartNode && inputStartNode.focus();
+                        inputStartNode && inputStartNode.focus({ preventScroll });
                         /**
                          * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
                          * 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
@@ -298,7 +300,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                         break;
                     case 'rangeEnd':
                         const inputEndNode = get(this, 'rangeInputEndRef.current');
-                        inputEndNode && inputEndNode.focus();
+                        inputEndNode && inputEndNode.focus({ preventScroll });
                         /**
                          * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
                          * 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
@@ -323,19 +325,20 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
             isEventTarget: e => e && e.target === e.currentTarget,
             setInsetInputFocus: () => {
+                const { preventScroll } = this.props;
                 const { rangeInputFocus } = this.state;
                 switch (rangeInputFocus) {
                     case 'rangeEnd':
                         if (document.activeElement !== this.rangeInputEndRef.current) {
                             const inputEndNode = get(this, 'rangeInputEndRef.current');
-                            inputEndNode && inputEndNode.focus();
+                            inputEndNode && inputEndNode.focus({ preventScroll });
                         }
                         break;
                     case 'rangeStart':
                     default:
                         if (document.activeElement !== this.rangeInputStartRef.current) {
                             const inputStartNode = get(this, 'rangeInputStartRef.current');
-                            inputStartNode && inputStartNode.focus();
+                            inputStartNode && inputStartNode.focus({ preventScroll });
                         }
                         break;
                 }

packages/semi-ui/input/index.tsx

@@ -64,6 +64,7 @@ export interface InputProps extends
     inputStyle?: React.CSSProperties;
     getValueLength?: (value: string) => number;
     forwardRef?: ((instance: any) => void) | React.MutableRefObject<any> | null;
+    preventScroll?: boolean;
 }
 
 export interface InputState {
@@ -117,6 +118,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         insetLabelId: PropTypes.string,
         inputStyle: PropTypes.object,
         getValueLength: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -174,9 +176,10 @@ class Input extends BaseComponent<InputProps, InputState> {
             setValue: (value: string) => this.setState({ value }),
             setEyeClosed: (value: boolean) => this.setState({ eyeClosed: value }),
             toggleFocusing: (isFocus: boolean) => {
+                const { preventScroll } = this.props;
                 const input = this.inputRef && this.inputRef.current;
                 if (isFocus) {
-                    input && input.focus();
+                    input && input.focus({ preventScroll });
                 } else {
                     input && input.blur();
                 }
@@ -424,6 +427,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             forwardRef,
             maxLength,
             getValueLength,
+            preventScroll,
             ...rest
         } = this.props;
         const { value, paddingLeft, isFocus, minLength: stateMinLength } = this.state;

packages/semi-ui/inputNumber/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable max-depth */
@@ -54,6 +55,7 @@ export interface InputNumberProps extends InputProps {
     onUpClick?: (value: string, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface InputNumberState extends BaseInputNumberState {}
 
 class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
@@ -82,6 +84,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
         prefixCls: PropTypes.string,
         pressInterval: PropTypes.number,
         pressTimeout: PropTypes.number,
+        preventScroll: PropTypes.bool,
         shiftStep: PropTypes.number,
         step: PropTypes.number,
         style: PropTypes.object,
@@ -246,7 +249,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     }
 
     componentDidUpdate(prevProps: InputNumberProps) {
-        const { value } = this.props;
+        const { value, preventScroll } = this.props;
         const { focusing } = this.state;
         let newValue;
         /**
@@ -338,7 +341,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
 
         if (this.props.keepFocus && this.state.focusing) {
             if (document.activeElement !== this.inputNode) {
-                this.inputNode.focus();
+                this.inputNode.focus({ preventScroll });
             }
         }
     }

packages/semi-ui/modal/ModalContent.tsx

@@ -31,7 +31,8 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         getContainerContext: PropTypes.func,
         contentClassName: PropTypes.string,
         maskClassName: PropTypes.string,
-        onAnimationEnd: PropTypes.func
+        onAnimationEnd: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -88,15 +89,16 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             getMouseState: () => this.state.dialogMouseDown,
             modalDialogFocus: () => {
+                const { preventScroll } = this.props;
                 let activeElementInDialog;
                 if (this.modalDialogRef) {
                     const activeElement = FocusTrapHandle.getActiveElement();
                     activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
                     this.focusTrapHandle?.destroy();
-                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current);
+                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current, { preventScroll });
                 }
                 if (!activeElementInDialog) {
-                    this.modalDialogRef?.current?.focus();
+                    this.modalDialogRef?.current?.focus({ preventScroll });
                 }
             },
             modalDialogBlur: () => {
@@ -105,8 +107,9 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             prevFocusElementReFocus: () => {
                 const { prevFocusElement } = this.state;
+                const { preventScroll } = this.props;
                 const focus = get(prevFocusElement, 'focus');
-                isFunction(focus) && prevFocusElement.focus();
+                isFunction(focus) && prevFocusElement.focus({ preventScroll });
             }
         };
     }

packages/semi-ui/radio/radio.tsx

@@ -44,6 +44,7 @@ export type RadioProps = {
     addonId?: string;
     extraId?: string;
     name?: string;
+    preventScroll?: boolean;
 };
 
 export interface RadioState {
@@ -77,6 +78,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         addonClassName: PropTypes.string,
         type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]), // Button style type
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps: Partial<RadioProps> = {

packages/semi-ui/radio/radioInner.tsx

@@ -26,6 +26,7 @@ export interface RadioInnerProps extends BaseProps {
     focusInner?: boolean;
     onInputFocus?: (e: any) => void;
     onInputBlur?: (e: any) => void;
+    preventScroll?: boolean;
 }
 
 interface RadioInnerState {
@@ -45,6 +46,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         focusInner: PropTypes.bool,
         onInputFocus: PropTypes.func,
         onInputBlur: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -95,7 +97,8 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
     }
 
     focus() {
-        this.inputEntity.focus();
+        const { preventScroll } = this.props;
+        this.inputEntity.focus({ preventScroll });
     }
 
     onChange(e: React.ChangeEvent<HTMLInputElement>) {

packages/semi-ui/rating/index.tsx

@@ -41,6 +41,7 @@ export interface RatingProps {
     size?: 'small' | 'default' | number;
     tooltips?: string[];
     id?: string;
+    preventScroll?: boolean;
 }
 
 export interface RatingState {
@@ -80,6 +81,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
         tooltips: PropTypes.arrayOf(PropTypes.string),
         id: PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -226,9 +228,9 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
     };
 
     focus = () => {
-        const { disabled } = this.props;
+        const { disabled, preventScroll } = this.props;
         if (!disabled) {
-            this.rate.focus();
+            this.rate.focus({ preventScroll });
         }
     };
 

packages/semi-ui/rating/item.tsx

@@ -27,6 +27,7 @@ export interface RatingItemProps extends BaseProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     onFocus?: (e: React.FocusEvent) => void;
     onBlur?: (e: React.FocusEvent) => void;
+    preventScroll?: boolean;
 }
 
 export interface RatingItemState {
@@ -54,6 +55,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         'aria-describedby': PropTypes.string,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     foundation: RatingItemFoundation;
@@ -117,11 +119,11 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
     };
 
     starFocus = () => {
-        const { value, index } = this.props;
+        const { value, index, preventScroll } = this.props;
         if (value - index === 0.5) {
-            this.firstStar.focus();
+            this.firstStar.focus({ preventScroll });
         } else {
-            this.secondStar.focus();
+            this.secondStar.focus({ preventScroll });
         }
     }
 

packages/semi-ui/select/index.tsx

@@ -152,6 +152,7 @@ export type SelectProps = {
     onBlur?: (e: React.FocusEvent) => void;
     onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
+    preventScroll?: boolean;
 } & Pick<
 TooltipProps,
 | 'spacing'
@@ -271,6 +272,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         renderOptionItem: PropTypes.func,
         onListScroll: PropTypes.func,
         arrowIcon: PropTypes.node,
+        preventScroll: PropTypes.bool,
     // open: PropTypes.bool,
     // tagClosable: PropTypes.bool,
     };
@@ -396,8 +398,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 });
             },
             focusInput: () => {
+                const { preventScroll } = this.props;
                 if (this.inputRef && this.inputRef.current) {
-                    this.inputRef.current.focus();
+                    this.inputRef.current.focus({ preventScroll });
                 }
             },
         };
@@ -526,8 +529,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             },
             focusTrigger: () => {
                 try {
+                    const { preventScroll } = this.props;
                     const el = (this.triggerRef.current) as any;
-                    el.focus();
+                    el.focus({ preventScroll });
                 } catch (error) {
 
                 }

packages/semi-ui/tabs/index.tsx

@@ -48,6 +48,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
         type: PropTypes.oneOf(strings.TYPE_MAP),
         onTabClose: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps: TabsProps = {

packages/semi-ui/tabs/interface.ts

@@ -36,6 +36,7 @@ export interface TabsProps {
     tabPosition?: TabPosition;
     type?: TabType;
     onTabClose?: (tabKey: string) => void;
+    preventScroll?: boolean;
 }
 
 export interface TabBarProps {

packages/semi-ui/tagInput/index.tsx

@@ -61,6 +61,7 @@ export interface TagInputProps {
     value?: string[] | undefined;
     autoFocus?: boolean;
     'aria-label'?: string;
+    preventScroll?: boolean;
 }
 
 export interface TagInputState {
@@ -108,6 +109,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -176,9 +178,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 this.setState({ focusing });
             },
             toggleFocusing: (isFocus: boolean) => {
+                const { preventScroll } = this.props;
                 const input = this.inputRef && this.inputRef.current;
                 if (isFocus) {
-                    input && input.focus();
+                    input && input.focus({ preventScroll });
                 } else {
                     input && input.blur();
                 }
@@ -212,9 +215,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     componentDidMount() {
-        const { disabled, autoFocus } = this.props;
+        const { disabled, autoFocus, preventScroll } = this.props;
         if (!disabled && autoFocus) {
-            this.inputRef.current.focus();
+            this.inputRef.current.focus({ preventScroll });
         }
     }
 
@@ -426,7 +429,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     focus() {
-        this.inputRef.current.focus();
+        const { preventScroll } = this.props;
+        this.inputRef.current.focus({ preventScroll });
     }
 
     render() {

packages/semi-ui/timePicker/TimeInput.tsx

@@ -33,7 +33,8 @@ export type TimeInputProps = Pick<TimePickerProps,
 'locale' |
 'localeCode' |
 'insetLabel' |
-'validateStatus'> & BaseProps & {
+'validateStatus' |
+'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
     onClick?: React.MouseEventHandler;
@@ -69,6 +70,7 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
         localeCode: PropTypes.string,
         insetLabel: PropTypes.node,
         validateStatus: PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -96,13 +98,13 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
 
     componentDidMount() {
         super.componentDidMount();
-        const { focusOnOpen } = this.props;
+        const { focusOnOpen, preventScroll } = this.props;
         if (focusOnOpen) {
             const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
             requestAnimationFrame(() => {
                 const inputNode = this.adapter.getCache('inputNode');
                 if (inputNode) {
-                    inputNode.focus();
+                    inputNode.focus({ preventScroll });
                     inputNode.select();
                 }
             });

packages/semi-ui/timePicker/TimePicker.tsx

@@ -75,6 +75,7 @@ export type TimePickerProps = {
     popupStyle?: React.CSSProperties;
     position?: Position;
     prefixCls?: string;
+    preventScroll?: boolean;
     rangeSeparator?: string;
     scrollItemProps?: ScrollItemProps<any>;
     secondStep?: number;
@@ -164,6 +165,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         autoAdjustOverflow: PropTypes.bool,
         ...PanelShape,
         inputStyle: PropTypes.object,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {

packages/semi-ui/tooltip/index.tsx

@@ -76,6 +76,7 @@ export interface TooltipProps extends BaseProps {
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
     wrapperId?: string;
+    preventScroll?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -136,6 +137,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         wrapWhenSpecial: PropTypes.bool, // when trigger has special status such as "disabled" or "loading", wrap span
         guardFocus: PropTypes.bool,
         returnFocusOnClose: PropTypes.bool,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -422,9 +424,10 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 return getActiveElement();
             },
             setInitialFocus: () => {
+                const { preventScroll } = this.props;
                 const focusRefNode = get(this, 'initialFocusRef.current');
                 if (focusRefNode && 'focus' in focusRefNode) {
-                    focusRefNode.focus();
+                    focusRefNode.focus({ preventScroll });
                 } 
             },
             notifyEscKeydown: (event: React.KeyboardEvent) => {

packages/semi-ui/tree/index.tsx

@@ -114,6 +114,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         labelEllipsis: PropTypes.bool,
         checkRelation: PropTypes.string,
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -445,8 +446,9 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 this.setState({ inputValue: value });
             },
             focusInput: () => {
+                const { preventScroll } = this.props;
                 if (this.inputRef && this.inputRef.current) {
-                    (this.inputRef.current as any).focus();
+                    (this.inputRef.current as any).focus({ preventScroll });
                 }
             },
         };