fix(components): [el-input] maxlength is not correct (#3969)

packages/components/input/src/input.ts

@@ -74,9 +74,6 @@ export const inputProps = buildProps({
     type: definePropType<StyleValue>([Object, Array, String]),
     default: () => mutable({} as const),
   },
-  maxlength: {
-    type: [Number, String],
-  },
 } as const)
 export type InputProps = ExtractPropTypes<typeof inputProps>
 

packages/components/input/src/input.vue

@@ -85,7 +85,7 @@
           </el-icon>
           <span v-if="isWordLimitVisible" class="el-input__count">
             <span class="el-input__count-inner">
-              {{ textLength }} / {{ maxlength }}
+              {{ textLength }} / {{ attrs.maxlength }}
             </span>
           </span>
         </span>
@@ -126,7 +126,7 @@
         @keydown="handleKeydown"
       />
       <span v-if="isWordLimitVisible" class="el-input__count">
-        {{ textLength }} / {{ maxlength }}
+        {{ textLength }} / {{ attrs.maxlength }}
       </span>
     </template>
   </div>
@@ -229,7 +229,7 @@ export default defineComponent({
     const isWordLimitVisible = computed(
       () =>
         props.showWordLimit &&
-        !!props.maxlength &&
+        !!attrs.value.maxlength &&
         (props.type === 'text' || props.type === 'textarea') &&
         !inputDisabled.value &&
         !props.readonly &&
@@ -239,7 +239,8 @@ export default defineComponent({
     const inputExceed = computed(
       () =>
         // show exceed style if length of initial value greater then maxlength
-        !!isWordLimitVisible.value && textLength.value > Number(props.maxlength)
+        !!isWordLimitVisible.value &&
+        textLength.value > Number(attrs.value.maxlength)
     )
 
     const resizeTextarea = () => {
@@ -293,7 +294,7 @@ export default defineComponent({
     }
 
     const handleInput = (event: Event) => {
-      let { value } = event.target as TargetElement
+      const { value } = event.target as TargetElement
 
       // should not emit input during composition
       // see: https://github.com/ElemeFE/element/issues/10516
@@ -303,15 +304,6 @@ export default defineComponent({
       // should remove the following line when we don't support IE
       if (value === nativeInputValue.value) return
 
-      // if set maxlength
-      if (props.maxlength) {
-        const sliceIndex = inputExceed.value
-          ? textLength.value
-          : props.maxlength
-        //  Convert value to an array for get a right lenght
-        value = Array.from(value).slice(0, Number(sliceIndex)).join('')
-      }
-
       emit(UPDATE_MODEL_EVENT, value)
       emit('input', value)