Skip to content

Commit

Permalink
fix(input): fix maxlength bug (#4429)
Browse files Browse the repository at this point in the history 
* fix(input): fix maxlength bug

closed #4413

* chore(input): update comment

* test(unit): update test case

* test(unit): update snapshot

* chore: update snapshot

* chore: update snapshot
  • Loading branch information
@novlan1
novlan1 authored Aug 2, 2024
1 parent 4aeb39c commit 14f3cff
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/input/__tests__/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe('Input', () => {
it(':maxlength', async () => {
const wrapper = mount(() => <Input label="标题" maxlength={10} />);
const input = wrapper.find('.t-input input');
expect(input.element.getAttribute('maxlength')).toBe('10');
expect(input.element.getAttribute('maxlength')).toBe(null);
});
it(':maxcharacter', async () => {
const value = ref('12345');
Expand Down
4 changes: 3 additions & 1 deletion src/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,14 @@ export default defineComponent({
disabled: disabled.value,
readonly: readonly.value,
placeholder: tPlaceholder.value,
maxlength: (!props.allowInputOverMax && props.maxlength) || undefined,
name: props.name || undefined,
type: renderType.value,
autocomplete: props.autocomplete ?? (globalConfig.value.autocomplete || undefined),
unselectable: readonly.value ? 'on' : undefined,
spellcheck: props.spellCheck,
// 不要传给 input 原生元素 maxlength，浏览器默认行为会按照 unicode 进行限制，与 maxLength API 违背
// https://github.com/Tencent/tdesign-vue-next/issues/4413
// 参见： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength，提到了字符串长度的计算方法，就是 str.length
}),
);

Expand Down
2 changes: 0 additions & 2 deletions test/unit/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78252,7 +78252,6 @@ exports[`csr snapshot test > csr test ./src/input/_example/max-length-count.vue
<!---->
<input
class="t-input__inner"
maxlength="5"
placeholder="内置字数限制，最大文本长度，一个中文字等于一个长度"
spellcheck="false"
type="text"
Expand Down Expand Up @@ -78364,7 +78363,6 @@ exports[`csr snapshot test > csr test ./src/input/_example/max-length-count.vue
<!---->
<input
class="t-input__inner"
maxlength="5"
placeholder="自定义字数限制文本"
spellcheck="false"
type="text"
Expand Down
2 changes: 1 addition & 1 deletion test/unit/snap/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ exports[`ssr snapshot test > ssr test ./src/input/_example/format.vue 1`] = `"<d

exports[`ssr snapshot test > ssr test ./src/input/_example/group.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div><div class=\\"t-input-group t-input-group--separate\\"><!--[--><div class=\\"t-input__wrap\\" style=\\"width:100px;\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value=\\"0731\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value=\\"12345677\\"><!----><!----><!----><!----></div><!----></div><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div><div class=\\"t-input-group t-input-group--separate\\"><!--[--><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><!----><!----><!----></div><!----></div><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div><div class=\\"t-input-group\\"><!--[--><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-input__wrap\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><!----><!----><!----></div><!----></div><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div><div class=\\"t-input-group t-input-group--separate\\"><!--[--><div class=\\"t-input__wrap\\" style=\\"width:100px;\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value=\\"0731\\"><!----><!----><!----><!----></div><!----></div><span style=\\"line-height:32px;\\"> - </span><div class=\\"t-input__wrap\\" style=\\"width:100px;\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value=\\"12345\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-input__wrap\\" style=\\"width:100px;\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value=\\"678901\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-input__wrap\\" style=\\"width:100px;\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><!----><!----><!----></div><!----></div><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/input/_example/max-length-count.vue 1`] = `"<div class=\\"t-space t-space-vertical t-demo__input-status\\" style=\\"gap:16px;max-width:500px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，最大文本长度，一个中文字等于一个长度\\" maxlength=\\"5\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/5</div></div><!----><!----></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，最大字符数量限制，一个中文字等于两个字符\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/10</div></div><!----><!----></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，字数超出时允许继续输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/5</div></div><!----><!----></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"自定义字数限制文本\\" maxlength=\\"5\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\">0/5<!----></div><!----><!----></div><!----></div></div><!----><!--]--><!--]--></div>"`;
exports[`ssr snapshot test > ssr test ./src/input/_example/max-length-count.vue 1`] = `"<div class=\\"t-space t-space-vertical t-demo__input-status\\" style=\\"gap:16px;max-width:500px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，最大文本长度，一个中文字等于一个长度\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/5</div></div><!----><!----></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，最大字符数量限制，一个中文字等于两个字符\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/10</div></div><!----><!----></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"内置字数限制，字数超出时允许继续输入\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\"><!----><div class=\\"t-input__limit-number\\">0/5</div></div><!----><!----></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"自定义字数限制文本\\" type=\\"text\\" spellcheck=\\"false\\" value><!----><div class=\\"t-input__suffix\\">0/5<!----></div><!----><!----></div><!----></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/input/_example/password.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><span class=\\"t-input__prefix t-input__prefix-icon\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z\\" fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\"></path></svg><!--]--></span><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"password\\" spellcheck=\\"false\\" value=\\"520 TDesign\\"><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 26 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse-off t-input__suffix-clear\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M4 1.59l6.17 6.17 7.07 7.07L23.41 21 22 22.41l-2.97-2.96A12.5 12.5 0 011.08 12.3L1 12l.1-.3c.77-2.4 2.24-4.5 4.18-6.02L2.59 3 4 1.59zM6.7 7.1A10.53 10.53 0 003.1 12a10.5 10.5 0 0014.45 5.97l-1.8-1.8a5 5 0 01-6.93-6.93L6.7 7.11zm3.6 3.6a3 3 0 004 4l-4-4zM13 5c-.58 0-1.14.05-1.7.14l-.98.16L10 3.32l.99-.16A12.5 12.5 0 0124.9 11.7l.1.31-.1.3c-.41 1.3-1.03 2.5-1.82 3.58l-.59.8-1.61-1.18.59-.8c.6-.82 1.08-1.73 1.42-2.7A10.5 10.5 0 0013 5zm.51 1.93l.96.29a5 5 0 013.31 3.31l.3.96-1.92.58-.3-.95a3 3 0 00-1.98-1.99l-.95-.3.58-1.9z\\"></path></svg></span></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><span class=\\"t-input__prefix t-input__prefix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z\\" fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\"></path></svg></span><!----><input class=\\"t-input__inner\\" placeholder=\\"请输入\\" type=\\"password\\" spellcheck=\\"false\\" value=\\"520 TDesign\\"><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 26 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse-off t-input__suffix-clear\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M4 1.59l6.17 6.17 7.07 7.07L23.41 21 22 22.41l-2.97-2.96A12.5 12.5 0 011.08 12.3L1 12l.1-.3c.77-2.4 2.24-4.5 4.18-6.02L2.59 3 4 1.59zM6.7 7.1A10.53 10.53 0 003.1 12a10.5 10.5 0 0014.45 5.97l-1.8-1.8a5 5 0 01-6.93-6.93L6.7 7.11zm3.6 3.6a3 3 0 004 4l-4-4zM13 5c-.58 0-1.14.05-1.7.14l-.98.16L10 3.32l.99-.16A12.5 12.5 0 0124.9 11.7l.1.31-.1.3c-.41 1.3-1.03 2.5-1.82 3.58l-.59.8-1.61-1.18.59-.8c.6-.82 1.08-1.73 1.42-2.7A10.5 10.5 0 0013 5zm.51 1.93l.96.29a5 5 0 013.31 3.31l.3.96-1.92.58-.3-.95a3 3 0 00-1.98-1.99l-.95-.3.58-1.9z\\"></path></svg></span></div><!----></div></div><!----><!--]--><!--]--></div>"`;

Expand Down

0 comments on commit 14f3cff

Please sign in to comment.