Browse Source

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

zhangyumei.0319 2 years ago
parent
commit
71f9cfe94f

+ 9 - 1
packages/semi-ui/input/index.tsx

@@ -216,6 +216,15 @@ 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
+        const { disabled, autofocus, preventScroll } = this.props;
+        if (!disabled && autofocus) {
+            this.inputRef.current.focus({ preventScroll });
+        }
+    }
+
     handleClear = (e: React.MouseEvent<HTMLInputElement>) => {
         this.foundation.handleClear(e);
     };
@@ -478,7 +487,6 @@ class Input extends BaseComponent<InputProps, InputState> {
         const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
             ...rest,
             style: inputStyle,
-            autoFocus: autofocus,
             className: inputCls,
             disabled,
             readOnly: readonly,

+ 21 - 0
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>
+  );
+};