fix: field autosize (#223)

Co-authored-by: kongjing@dian.so <apple@AppledeMacBook-Pro-2.local>

package.json

@@ -138,7 +138,8 @@
     "rollup-plugin-styles": "^3.14.1",
     "run-s": "^0.0.0",
     "stylelint": "^13.13.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
     "@antmjs/warning": "^1.17.7"

packages/vantui/src/button/index.tsx

@@ -13,11 +13,11 @@ if (process.env.TARO_ENV === 'h5' && !removed) {
   const _timer = setInterval(() => {
     time--
     if (time > 0) {
-      const allStyle = document.getElementsByTagName('style')
+      const allStyle = document.getElementsByTagName('style') || []
       for (let i = allStyle.length - 1; i >= 0; i--) {
         const sty: any = allStyle[i]
-        const htm = sty.getInnerHTML()
-        if (/^taro-button-core{/.test(htm)) {
+        const htm = sty.innerHTML
+        if (htm && /^taro-button-core{/.test(htm)) {
           sty.remove()
           removed = true
           _timer && clearInterval(_timer)

packages/vantui/src/field/index.less

@@ -42,6 +42,12 @@
     background-color: transparent;
     border: 0;
     resize: none;
+    font-size: @field-font-size;
+
+    textarea,
+    input {
+      font-size: @field-font-size;
+    }
 
     .theme(color, '@field-input-text-color');
     .theme(height, '@cell-line-height');
@@ -82,9 +88,11 @@
     }
   }
 
-  .autosize {
+  .autosize-height {
     height: auto;
+  }
 
+  .autosize {
     textarea {
       resize: none;
       overflow: hidden;

packages/vantui/src/field/index.tsx

@@ -17,11 +17,12 @@ export function Field(props: FieldProps) {
     focused: false,
   })
   const [state, setState] = useState({
-    innerValue: '',
+    // innerValue: '',
     showClear: false,
     unitag: 'van-field',
   })
-  const { innerValue, showClear } = state
+  const [innerValue, setInnerValue] = useState('')
+  const { showClear } = state
   const {
     size,
     leftIcon,
@@ -110,9 +111,7 @@ export function Field(props: FieldProps) {
     Object.defineProperty(event, 'detail', {
       value: event.detail.value,
     })
-    setState((pre: any) => {
-      return { ...pre, innerValue: event.detail }
-    })
+    setInnerValue(event.detail)
     Taro.nextTick(() => {
       onInput?.(event)
       onChange?.(event)
@@ -149,6 +148,7 @@ export function Field(props: FieldProps) {
     onFocus?.(event)
   }
   const _blur = function (event: any) {
+    console.info('blur')
     ref.current.focused = false
     setShowClear(innerValue)
     Object.defineProperty(event, 'detail', {
@@ -157,9 +157,7 @@ export function Field(props: FieldProps) {
     onBlur?.(event)
   }
   const _clear = function () {
-    setState((pre: any) => {
-      return { ...pre, innerValue: '' }
-    })
+    setInnerValue('')
     setShowClear('')
     Taro.nextTick(() => {
       emitChange()
@@ -193,9 +191,7 @@ export function Field(props: FieldProps) {
 
   useEffect(
     function () {
-      setState((pre: any) => {
-        return { ...pre, innerValue: value }
-      })
+      setInnerValue(value as string)
     },
     [value],
   )
@@ -258,7 +254,13 @@ export function Field(props: FieldProps) {
                   disabled,
                   error,
                 },
-              ]) + ` input-class ${autosize ? 'autosize' : ''} ${state.unitag}`
+              ]) +
+              ` input-class ${autosize ? 'autosize' : ''} ${state.unitag}` +
+              `${
+                process.env.TARO_ENV !== 'weapp' && autosize
+                  ? ' autosize-height'
+                  : ''
+              }`
             }
             fixed={fixed}
             focus={focus}

packages/vantui/src/style/var.less

@@ -299,6 +299,7 @@
 @field-word-num-full-color: @red;
 @field-disabled-text-color: @gray-5;
 @field-text-area-min-height: 148px;
+@field-font-size: @font-size-md;
 
 // GoodsAction
 @goods-action-background-color: @white;

yarn.lock

@@ -1006,6 +1006,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.17.9"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
@@ -3983,6 +3990,11 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
+dequal@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 detect-file@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@@ -9171,6 +9183,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-deep-compare-effect@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.npmmirror.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
+  integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    dequal "^2.0.2"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"