fix(pro:textarea): textarea el shouldn't show scrollbar (#1080)

IDuxFE · Aug 18, 2022 · de7cc60 · de7cc60
1 parent dcb28b1
commit de7cc60
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 94 deletions.
diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted, watch } from 'vue'
+import { type StyleValue, computed, defineComponent, normalizeClass, onMounted, watch } from 'vue'
 
 import { type FormAccessor } from '@idux/cdk/forms'
 import { type TextareaConfig, useGlobalConfig } from '@idux/components/config'
@@ -41,7 +41,7 @@ export default defineComponent({
       handleCompositionEnd,
       handleClear,
       syncValue,
-    } = ɵUseInput(props, config)
+    } = ɵUseInput<HTMLTextAreaElement>(props, config)
 
     expose({ focus, blur })
 
@@ -70,7 +70,7 @@ export default defineComponent({
     })
     const textareaStyle = computed(() => ({ resize: resize.value }))
 
-    const { resizeToFitContent } = useAutoRows(elementRef as Ref<HTMLTextAreaElement>, autoRows)
+    const { resizeToFitContent } = useAutoRows(elementRef, autoRows)
     onMounted(() => {
       syncValue()
       watch(() => accessor.value, resizeToFitContent, { immediate: true })

diff --git a/packages/components/textarea/src/composables/useAutoRows.ts b/packages/components/textarea/src/composables/useAutoRows.ts
@@ -180,7 +180,7 @@ export function useAutoRows(
 
   function reset() {
     if (initialHeight !== undefined) {
-      textareaRef.value!.style.height = initialHeight
+      textareaRef.value && (textareaRef.value.style.height = initialHeight)
     }
   }
 
@@ -192,9 +192,14 @@ export function useAutoRows(
   }, 16)
 
   onMounted(() => {
-    initialHeight = textareaRef.value!.style.height
-
     const watchStopHandlers = [
+      watch(
+        textareaRef,
+        () => {
+          textareaRef.value && (initialHeight = textareaRef.value.style.height)
+        },
+        { immediate: true },
+      ),
       watch(
         autoRows,
         () => {

diff --git a/packages/pro/textarea/src/ProTextarea.tsx b/packages/pro/textarea/src/ProTextarea.tsx
@@ -162,89 +162,3 @@ function useDataCount(props: ProTextareaProps, config: ProTextareaConfig, valueR
     return dataCount
   })
 }
-
-// function useTexarea(
-//   props: ProTextareaProps,
-//   config: ProTextareaConfig,
-//   textareaCompRef: Ref<TextareaInstance | undefined>,
-//   valueRef: Ref<string | undefined>,
-//   setValue: (value: string | undefined) => void,
-// ): {
-//   textareaRef: Ref<HTMLTextAreaElement | undefined>
-//   lineHeight: ComputedRef<number>
-//   boxSizingData: ComputedRef<ɵBoxSizingData>
-//   isFocused: ComputedRef<boolean>
-//   textareaCompProps: ComputedRef<TextareaProps>
-// } {
-//   const textareaRef = ref<HTMLTextAreaElement | undefined>()
-//   const [isFocused, setIsFocused] = useState<boolean>(false)
-
-//   watch(textareaCompRef, textareaComp => {
-//     nextTick(() => {
-//       textareaRef.value = textareaComp?.getTextareaElement()
-//     })
-//   })
-
-//   const lineHeight = ɵUseLineHeight(textareaRef)
-//   const boxSizingData = useTextareaBoxSizingData(textareaRef)
-
-//   const textareaCompProps = computed<TextareaProps>(() => {
-//     const {
-//       control,
-//       clearable = config.clearable,
-//       clearIcon = config.clearIcon,
-//       disabled,
-//       readonly,
-//       size = config.size,
-//       trim,
-
-//       onChange,
-//       onClear,
-//       onCompositionStart,
-//       onCompositionEnd,
-//       onInput,
-//       onFocus,
-//       onBlur,
-//     } = props
-
-//     const handleTextareaCompFocus = (evt: FocusEvent) => {
-//       callEmit(onFocus, evt)
-//       setIsFocused(true)
-//     }
-//     const handleTextareaCompBlur = (evt: FocusEvent) => {
-//       callEmit(onBlur, evt)
-//       setIsFocused(false)
-//     }
-
-//     return {
-//       value: valueRef.value,
-//       autoRows: true,
-//       borderless: true,
-//       showCount: false,
-//       control,
-//       clearable,
-//       clearIcon,
-//       disabled,
-//       readonly,
-//       size,
-//       trim,
-
-//       'onUpdate:value': setValue,
-//       onChange,
-//       onClear,
-//       onCompositionStart,
-//       onCompositionEnd,
-//       onInput,
-//       onFocus: handleTextareaCompFocus,
-//       onBlur: handleTextareaCompBlur,
-//     }
-//   })
-
-//   return {
-//     textareaRef,
-//     lineHeight,
-//     boxSizingData,
-//     isFocused,
-//     textareaCompProps,
-//   }
-// }
diff --git a/packages/pro/textarea/src/composables/useErrorLines.ts b/packages/pro/textarea/src/composables/useErrorLines.ts
@@ -6,7 +6,7 @@
  */
 
 import type { ProTextareaProps } from '../types'
-import type { BoxSizingData } from '@idux/components/textarea/src/utils/getBoxSizingData'
+import type { ɵBoxSizingData } from '@idux/components/textarea'
 import type { ComputedRef } from 'vue'
 
 import { useState } from '@idux/cdk/utils'
@@ -21,7 +21,7 @@ export interface ErrorLinesContext {
 export function useErrorLines(
   props: ProTextareaProps,
   lineHeight: ComputedRef<number>,
-  sizingData: ComputedRef<BoxSizingData>,
+  sizingData: ComputedRef<ɵBoxSizingData>,
 ): ErrorLinesContext {
   const [visibleErrIndex, setvisibleErrIndex] = useState<number>(-1)
 

diff --git a/packages/pro/textarea/style/index.less b/packages/pro/textarea/style/index.less
@@ -129,6 +129,7 @@
       outline: 0;
       width: 100%;
       resize: none;
+      overflow: hidden;
 
       &[disabled] {
         cursor: not-allowed;