Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[t-input] 當type=number時產生錯誤 #2361

Closed
MarkGor opened this issue Apr 25, 2023 · 4 comments
Closed

[t-input] 當type=number時產生錯誤 #2361

MarkGor opened this issue Apr 25, 2023 · 4 comments
Labels
🐞 bug Something isn't working

Comments

@MarkGor
Copy link

MarkGor commented Apr 25, 2023

tdesign-vue 版本

1.2.7

重现链接

No response

重现步骤

tdesign-vue.js?v=d4497699:24029:35,
.vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper{ background-color: var(--td-bg-color-container); } handleInput: function handleInput(e) { var _this5 = this; this.preValue = this.inputValue + e.data; var val = e.currentTarget.value; var preCursorPos; if (this.composingRef) { this.composingRefValue = val; } else { if (this.type !== "number") { val = this.getValueByLimitNumber(val); } emitEvent(this, "change", val, { e, trigger: "input" }); if (!this.isIE) { var inputRef = this.$refs.inputRef; preCursorPos = inputRef.selectionStart; setTimeout(function() { **inputRef.selectionEnd = preCursorPos;** }); } this.$nextTick(function() { _this5.setInputValue(_this5.value); }); }

當input[type="number"]時候,是沒有selectionEnd 方法的,

控制台報錯:
DOMException: Failed to set the 'selectionEnd' property on 'HTMLInputElement': The input element's type ('number') does not support selection.
at http://localhost:3001/node_modules/.vite/deps/tdesign-vue.js?v=d4497699:24029:35
(匿名) @ input.tsx:373
setTimeout(异步)
handleInput @ input.tsx:372
invokeWithErrorHandling @ vue.runtime.esm.js:1863
invoker @ vue.runtime.esm.js:2188
original._wrapper @ vue.runtime.esm.js:6961

期望结果

不報錯

实际结果

報錯

框架版本

Vue2.6

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

@github-actions
Copy link
Contributor

👋 @MarkGor,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@MarkGor
Copy link
Author

MarkGor commented Apr 25, 2023

上述代碼亂了,重新補充:
index.ts 355行:
`
handleInput(e: InputEvent | CompositionEvent) {
this.preValue = this.inputValue + e.data;
let {
currentTarget: { value: val },
}: any = e;
let preCursorPos: number;
if (this.composingRef) {
this.composingRefValue = val;
} else {
if (this.type !== 'number') {
val = this.getValueByLimitNumber(val);
}
emitEvent<Parameters<TdInputProps['onChange']>>(this, 'change', val, { e, trigger: 'input' });
// 受控,重要,勿删 input无法直接实现受控
if (!this.isIE) {
const inputRef = this.$refs.inputRef as HTMLInputElement;
preCursorPos = inputRef.selectionStart;
setTimeout(() => {
inputRef.selectionEnd = preCursorPos;
});
}

    this.$nextTick(() => {
      this.setInputValue(this.value);
    });
  }
},`

@MarkGor
Copy link
Author

MarkGor commented Apr 26, 2023

規避方案:使用input-number,theme="none"的方法避開

@uyarn uyarn added the 🐞 bug Something isn't working label Apr 27, 2023
@chaishi
Copy link
Collaborator

chaishi commented Jul 22, 2023

image

@chaishi chaishi closed this as completed Sep 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants