fix: fix audoFocus autofocus in Input and TextArea #1608

packages/semi-ui/input/index.tsx

@@ -24,7 +24,7 @@ export type InputMode = 'password';
 export type ValidateStatus = "default" | "error" | "warning" | "success";
 
 export interface InputProps extends
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'placeholder' | 'onFocus' | 'onBlur'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -41,7 +41,6 @@ export interface InputProps extends
     defaultValue?: React.ReactText;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
     type?: string;
     showClear?: boolean;
     hideSuffix?: boolean;
@@ -99,7 +98,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         defaultValue: PropTypes.any,
         disabled: PropTypes.bool,
         readonly: PropTypes.bool,
-        autofocus: PropTypes.bool,
+        autoFocus: PropTypes.bool,
         type: PropTypes.string,
         showClear: PropTypes.bool,
         hideSuffix: PropTypes.bool,
@@ -224,8 +223,8 @@ class Input extends BaseComponent<InputProps, InputState> {
         // 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) {
+        const { disabled, autoFocus, preventScroll } = this.props;
+        if (!disabled && (autoFocus || this.props['autofocus'])) {
             this.inputRef.current.focus({ preventScroll });
         }
     }
@@ -425,7 +424,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         const {
             addonAfter,
             addonBefore,
-            autofocus,
+            autoFocus,
             clearIcon,
             className,
             disabled,

packages/semi-ui/input/textarea.tsx

@@ -35,7 +35,7 @@ export interface TextAreaProps extends
     defaultValue?: string;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
+    autoFocus?: boolean;
     showCounter?: boolean;
     showClear?: boolean;
     onClear?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
@@ -280,6 +280,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             minLength,
             showClear,
             borderless,
+            autoFocus,
             ...rest
         } = this.props;
         const { isFocus, value, minLength: stateMinLength } = this.state;
@@ -307,6 +308,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         );
         const itemProps = {
             ...omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear'),
+            autoFocus: autoFocus || this.props['autofocus'],
             className: itemCls,
             disabled,
             readOnly: readonly,

yarn.lock

@@ -1488,25 +1488,11 @@
     "@douyinfe/semi-animation-styled" "2.23.2"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.39.3.tgz#b46cc2a9db9f489e52f62965bb9857708f37f73e"
-  integrity sha512-sMf2cKmFIMVWFdQlTyMXO917oOvjDq+KOTGLyO9rVIZDK0mFU9VM/jToYngKaUU+f6kvNZcLdx+PUxKQEfZ7hQ==
-  dependencies:
-    "@douyinfe/semi-animation" "2.39.3"
-    "@douyinfe/semi-animation-styled" "2.39.3"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.23.2"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz#f18bc074515441c297cc636ed98521e249d093c9"
   integrity sha512-cKaA1yGHPF76Rx7EZDZicj+1oX1su2wnqb/UGFOTquAwqWmkTfgQ+EKxCd/N704WH+RtmGf4xbrJKpBvvcEdSQ==
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.39.3.tgz#4818e43b9fc646e9a3304ec2081f50c84a168aa1"
-  integrity sha512-mMExH5PXvCW2D8rtbG8pk53L9pYyBa8QNDoB2nNMrFlGSvHU+o/1UJ0Y504rUZ0LMsi2QJChP8Ry4mqzINN2sg==
-
 "@douyinfe/[email protected]":
   version "2.12.0"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz#51fe52d3911c2591a80a6e9fe96e6809c1511f13"
@@ -1522,13 +1508,6 @@
   dependencies:
     bezier-easing "^2.1.0"
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.39.3.tgz#d8c21be360431b48a8ea8856920cf4d534e68c93"
-  integrity sha512-KI8O8mvuZiZPNwiK+OUSO/DjPcXLs7sdopPdN3g9WSR7ipPJKmorOZzAG2OTUDH0b4diQYd8gs/YIiFfU+UoOw==
-  dependencies:
-    bezier-easing "^2.1.0"
-
 "@douyinfe/[email protected]":
   version "2.33.1"
   resolved "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.33.1.tgz#1dfe6233e35a4ed768cb580b0c9a677d1c34ffba"
@@ -1543,20 +1522,6 @@
     memoize-one "^5.2.1"
     scroll-into-view-if-needed "^2.2.24"
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.39.3.tgz#6490340494d8ea40981c41123b02fd4ab64cbe2c"
-  integrity sha512-yTjJYd4BiTdbxt0tCLPJCe3IDCdOEuMjaslDU2TLE3oVs5aTfEcnS2HjioSFgsLPSqEgk8jCdwQDD7eaf+pruA==
-  dependencies:
-    "@douyinfe/semi-animation" "2.39.3"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    lodash "^4.17.21"
-    memoize-one "^5.2.1"
-    scroll-into-view-if-needed "^2.2.24"
-
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
   version "2.33.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.33.1.tgz#8e2871d9bc0ab7e12df74e3c71802d53d69b7425"
@@ -1564,23 +1529,11 @@
   dependencies:
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.39.3.tgz#0e21bbcdd3705b8f1570935b0096ee3847bed34f"
-  integrity sha512-l/Wq0ytYecSO1AbNIuLgDdlJfi1nOMLm5aZoPCJRLU6qRASPjQhpgV1inf050FlVFVfK1ocIiyOyjkTP9sEpNg==
-  dependencies:
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.33.1"
   resolved "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.33.1.tgz#530ab851f4dc32a52221c4067c778c800b9b55d7"
   integrity sha512-tTTUN8QwnQiF++sk4VBNzfkG87aYZ4iUeqk2ys8/ymVUmCZQ7y46ys020GO1MfPHRR47OMFPI82FVcH1WQtE3g==
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.39.3.tgz#1a0d7bd523e16244efa08004ad6169994cd13bf2"
-  integrity sha512-/bZNcAMRKk4cigH+ltAmTIxltR8aWrsiVUXdvBkf0txzv/NSXMRFNGehE3JFxiw728iE5P6B6AbJdDi64dKYqA==
-
 "@douyinfe/[email protected]":
   version "2.23.2"
   resolved "https://registry.npmjs.org/@douyinfe/semi-scss-compile/-/semi-scss-compile-2.23.2.tgz#30884bb194ee9ae1e81877985e5663c3297c1ced"
@@ -1654,38 +1607,6 @@
   dependencies:
     glob "^7.1.6"
 
-"@douyinfe/[email protected]":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.39.3.tgz#a02a5b20890587c674eb7c3b2550551f42b933a0"
-  integrity sha512-dTTD8nkzM0ad1Lli9cFYLqvmTsSvKp5NSIc35UQBZcvi7OvmUA7qaSMentEMgl15bVWKInwCvp+mSFJsDtDPlg==
-  dependencies:
-    glob "^7.1.6"
-
-"@douyinfe/semi-ui@^2.0.0":
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.39.3.tgz#081297781163882882e501686c76356804bd9555"
-  integrity sha512-xrQ9Xd1B4vhDK41RjN4AFxDD/ILuR9HTctJZ0Be+mio8xIifINtD2jD5xXB1pV+DE/43jtu30VzNlvLm/0TQbw==
-  dependencies:
-    "@douyinfe/semi-animation" "2.39.3"
-    "@douyinfe/semi-animation-react" "2.39.3"
-    "@douyinfe/semi-foundation" "2.39.3"
-    "@douyinfe/semi-icons" "2.39.3"
-    "@douyinfe/semi-illustrations" "2.39.3"
-    "@douyinfe/semi-theme-default" "2.39.3"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    copy-text-to-clipboard "^2.1.1"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-    react-resizable "^1.8.0"
-    react-sortable-hoc "^2.0.0"
-    react-window "^1.8.2"
-    resize-observer-polyfill "^1.5.1"
-    scroll-into-view-if-needed "^2.2.24"
-    utility-types "^3.10.0"
-
 "@douyinfe/semi-ui@latest":
   version "2.33.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.33.1.tgz#3234ca96eb3560b8299bc9750fbe59446522d9bb"
@@ -11253,11 +11174,6 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-semi-design@^2.33.0:
-  version "2.39.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.39.3.tgz#ceab48928648acd0fef41ea5ef97b17268aec70b"
-  integrity sha512-9oX8xdmLR9IZPZ4JpMd/1V+e2ebQ7gcqax2kgzl0ICY0iWvb40WrF+tvnkI92OVlD7OLqMlxv//Q83vkKoZ2fA==
-
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"