From 37c54c766db0ca7543165986bcefc138f1d08399 Mon Sep 17 00:00:00 2001 From: "Y." Date: Wed, 18 Dec 2024 17:03:25 +0800 Subject: [PATCH] fix(Input): fix maxlenght property problem (#1683) * fix(Input): fix maxlenght property problem * fix: fix cr --- .../__test__/__snapshots__/demo.test.jsx.snap | 4 - .../__test__/__snapshots__/demo.test.jsx.snap | 12 --- .../__test__/__snapshots__/demo.test.jsx.snap | 54 +------------- src/input/__test__/index.test.jsx | 7 +- src/input/demos/base.vue | 2 +- src/input/demos/suffix.vue | 2 +- src/input/input.tsx | 74 +++++++++++-------- 7 files changed, 50 insertions(+), 105 deletions(-) diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap index 0e46ca6b7..613a728c8 100644 --- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap @@ -795,7 +795,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = ` Dialog inputVue demo works fine 1`] = ` Dialog mobileVue demo works fine 1`] = ` Dialog mobileVue demo works fine 1`] = ` Form horizontalVue demo works fine 1`] = ` Form horizontalVue demo works fine 1`] = ` Form horizontalVue demo works fine 1`] = ` Form horizontalVue demo works fine 1`] = ` Form mobileVue demo works fine 1`] = ` Form mobileVue demo works fine 1`] = ` Form mobileVue demo works fine 1`] = ` Form mobileVue demo works fine 1`] = ` Form verticalVue demo works fine 1`] = ` Form verticalVue demo works fine 1`] = ` Form verticalVue demo works fine 1`] = ` Form verticalVue demo works fine 1`] = ` Input alignVue demo works fine 1`] = ` Input alignVue demo works fine 1`] = ` Input alignVue demo works fine 1`] = ` Input bannerVue demo works fine 1`] = ` Input baseVue demo works fine 1`] = ` Input baseVue demo works fine 1`] = ` Input baseVue demo works fine 1`] = ` Input borderedVue demo works fine 1`] = ` Input customVue demo works fine 1`] = ` Input labelVue demo works fine 1`] = ` Input layoutVue demo works fine 1`] = ` Input maxLengthVue demo works fine 1`] = ` Input maxLengthVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = `
Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` autocomplete="Off" class="t-input__control t-input--default t-input__control--disabled" disabled="" - maxlength="-1" name="" spellcheck="false" type="text" @@ -1546,7 +1516,6 @@ exports[`Input > Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input mobileVue demo works fine 1`] = ` Input prefixVue demo works fine 1`] = ` Input prefixVue demo works fine 1`] = ` Input specialVue demo works fine 1`] = ` Input specialVue demo works fine 1`] = ` Input specialVue demo works fine 1`] = ` Input specialVue demo works fine 1`] = ` Input specialVue demo works fine 1`] = ` Input statusVue demo works fine 1`] = ` Input statusVue demo works fine 1`] = ` autocomplete="Off" class="t-input__control t-input--default t-input__control--disabled" disabled="" - maxlength="-1" name="" spellcheck="false" type="text" @@ -2475,7 +2428,6 @@ exports[`Input > Input suffixVue demo works fine 1`] = ` Input suffixVue demo works fine 1`] = `
Input suffixVue demo works fine 1`] = ` { const value = ref(''); const wrapper = mount(); const input = wrapper.find('.t-input__wrap input'); - expect(input.element.getAttribute('maxlength')).toBe('10'); + expect(input.element.getAttribute('maxlength')).toBe(null); }); it(': autocomplete', async () => { diff --git a/src/input/demos/base.vue b/src/input/demos/base.vue index 703b736ad..c28c13daa 100644 --- a/src/input/demos/base.vue +++ b/src/input/demos/base.vue @@ -1,5 +1,5 @@ - + diff --git a/src/input/input.tsx b/src/input/input.tsx index 0bb095c69..6f350b6e8 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -5,10 +5,12 @@ import { CloseCircleFilledIcon as TCloseCircleFilledIcon, } from 'tdesign-icons-vue-next'; import isFunction from 'lodash/isFunction'; +import isObject from 'lodash/isObject'; import config from '../config'; import InputProps from './props'; import { InputValue, TdInputProps } from './type'; -import { getCharacterLength, useDefault, extendAPI } from '../shared'; +import { useDefault, extendAPI } from '../shared'; +import { getCharacterLength, limitUnicodeMaxLength } from '../_common/js/utils/helper'; import { FormItemInjectionKey } from '../form/const'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; @@ -94,18 +96,25 @@ export default defineComponent({ inputValueChangeHandle(e); }; + // 文本超出数量限制时，是否允许继续输入 + const getValueByLimitNumber = (inputValue: string) => { + const { allowInputOverMax, maxlength, maxcharacter } = props; + if (!(maxlength || maxcharacter) || allowInputOverMax || !inputValue) return inputValue; + if (maxlength) { + // input value could be unicode 😊 + return limitUnicodeMaxLength(inputValue, Number(maxlength)); + } + if (maxcharacter) { + const r = getCharacterLength(inputValue, maxcharacter); + if (isObject(r)) { + return r.characters; + } + } + }; + const inputValueChangeHandle = (e: Event) => { const { value } = e.target as HTMLInputElement; - const { allowInputOverMax, maxcharacter } = props; - if (!allowInputOverMax && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) { - const { length = 0, characters = '' } = getCharacterLength(value, maxcharacter) as { - length: number; - characters: string; - }; - innerValue.value = characters; - } else { - innerValue.value = value; - } + innerValue.value = getValueByLimitNumber(value); nextTick(() => setInputValue(innerValue.value)); }; @@ -235,31 +244,34 @@ export default defineComponent({ return
{tips}
; }; + // 参考： https://github.com/Tencent/tdesign-vue-next/issues/4413 + // 不传给 input 原生元素 maxlength，浏览器默认行为会按照 unicode 进行限制，与 maxLength API 违背 + const inputAttrs = { + ref: inputRef, + value: innerValue.value, + name: props.name, + type: renderType.value, + disabled: isDisabled.value, + autocomplete: props.autocomplete ? 'On' : 'Off', + placeholder: props.placeholder, + readonly: props.readonly, + // maxlength: props.maxlength, + pattern: props.pattern, + inputmode: props.inputmode, + spellcheck: props.spellCheck, + enterkeyhint: props.enterkeyhint, + onFocus: handleFocus, + onBlur: handleBlur, + onInput: handleInput, + onCompositionend: handleCompositionend, + }; + return (
{renderPrefix()}
- + {renderClearable()} {renderSuffix()} {renderSuffixIcon()}