fix: TreeSelect searchAutoFocous preventScroll bug (#1653)

* fix: TreeSelect searchAutoFocous preventScroll bug

* fix: [Input] Fix the problem that preventScroll is invalid in the case of autoFoucs

* fix: [Input] Call the init function in componentDidmount

---------

Co-authored-by: shijia.me <[email protected]>
Co-authored-by: zhangyumei.0319 <[email protected]>

packages/semi-ui/input/index.tsx

@@ -219,6 +219,16 @@ class Input extends BaseComponent<InputProps, InputState> {
         }
     }
 
+    componentDidMount(): void {
+        // autofocus is changed from the original support of input to the support of manually calling the focus method,
+        // so that preventScroll can still take effect under the setting of autofocus
+        this.foundation.init();
+        const { disabled, autofocus, preventScroll } = this.props;
+        if (!disabled && autofocus) {
+            this.inputRef.current.focus({ preventScroll });
+        }
+    }
+
     handleClear = (e: React.MouseEvent<HTMLInputElement>) => {
         this.foundation.handleClear(e);
     };
@@ -483,7 +493,6 @@ class Input extends BaseComponent<InputProps, InputState> {
         const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
             ...rest,
             style: inputStyle,
-            autoFocus: autofocus,
             className: inputCls,
             disabled,
             readOnly: readonly,

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -2251,3 +2251,24 @@ export const triggerRenderAddMethod = () => {
     </>
   );
 }
+
+export const AutoSearchFocusPlusPreventScroll = () => {
+  return (
+      <div>
+        <div style={{height: '100vh' }}>我是一个高度和视窗高度一致的div。
+          <br />由于 TreeSelect 设置了 searchAutoFocus 以及 preventScroll，
+          <br /> 符合预期的情况是在没有滚动屏幕情况下，你不会看到 TreeSelect 的 trigger
+        </div>
+        <TreeSelect
+          searchAutoFocus
+          searchPosition="trigger"
+          preventScroll={true}
+          style={{ width: 300 }}
+          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+          treeData={treeData2}
+          filterTreeNode
+          placeholder="单选"
+        />
+      </div>
+  );
+};

packages/semi-ui/treeSelect/index.tsx

@@ -644,7 +644,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             toggleHovering: bool => {
                 this.setState({ isHovering: bool });
             },
-            updateInputFocus: bool => { 
+            updateInputFocus: bool => {
                 if (bool) {
                     if (this.inputRef && this.inputRef.current) {
                         const { preventScroll } = this.props;
@@ -664,7 +664,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             },
             updateIsFocus: bool => {
                 this.setState({ isFocus: bool });
-            } 
+            }
         };
     }
 
@@ -858,8 +858,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             maxTagCount,
             searchPosition,
             filterTreeNode,
-            showRestTagsPopover, 
-            restTagsPopoverProps 
+            showRestTagsPopover,
+            restTagsPopoverProps
         } = this.props;
         const isTriggerPositionSearch = filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER;
         // searchPosition = trigger
@@ -947,7 +947,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     onClick={this.handleClear}
                     onKeyPress={this.handleClearEnterPress}
                 >
-                    { clearIcon ? clearIcon : <IconClear />}
+                    {clearIcon ? clearIcon : <IconClear />}
                 </div>
             );
         }
@@ -1135,7 +1135,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             placeholder,
             maxTagCount,
             checkRelation,
-            showRestTagsPopover, 
+            showRestTagsPopover,
             restTagsPopoverProps,
             searchPosition,
             filterTreeNode,
@@ -1193,6 +1193,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchAutoFocus,
             multiple,
             disabled,
+            preventScroll,
         } = this.props;
         const isDropdownPositionSearch = searchPosition === strings.SEARCH_POSITION_DROPDOWN;
         const inputcls = cls({
@@ -1203,6 +1204,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const baseInputProps = {
             value: inputValue,
             className: inputcls,
+            preventScroll,
             onChange: (value: string) => this.search(value),
         };
         const inputDropdownProps = {
@@ -1303,7 +1305,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         }
         if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
             this.foundation.focusInput(true);
-        } 
+        }
     }
 
     renderTreeNode = (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => {
@@ -1439,10 +1441,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.renderInput()
                     }
                     <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
-                        { noData ? this.renderEmpty() : (multiple ? 
+                        {noData ? this.renderEmpty() : (multiple ?
                             (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
                                 {this.renderNodeList()}
-                            </CheckboxGroup>) : 
+                            </CheckboxGroup>) :
                             this.renderNodeList()
                         )}
                     </div>