Element: [Bug Report] el-input-number not listening 'input' event

[garveen]

Element UI version

2.1.0

OS/Browsers version

*

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/Lvhcwuo3/1/

Steps to reproduce

随便用键盘输几个数

What is Expected?

el-input-number收到input事件时触发handleInputChange，同时触发上一级input事件，即重现内的alert

What is actually happening?

没触发

[element-bot]

Translation of this issue:

Element UI version

2.1.0

OS/Browsers version

*

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/Lvhcwuo3/1/

Steps to reproduce

Lose a few numbers by the keyboard

What is Expected?

El-input-number triggers the handleInputChange when it receives the input event and triggers the upper level input event, that is, the alert in the recurrence of the event.

What is actually happening?

Not triggered

[garveen]

9116 #9166 导致input事件无法传导到外面，事实上input事件必须监听

[garveen]

至于0.0x无法输入的问题，只要el-input-number不要强制格式化，而是只要合法的数字就原样保留，就没问题了

或者原样传导input事件，同时保留change事件目前处理方式，也可以

[wacky6]

没听明白你想说什么。「上一级input」指什么？0.0x又是什么？

[garveen]

0.0x 指的是#9116 报告的错误，“需要触发上一级的input”指的是引用该组件时的input事件侦听，亦即在jsfiddle内，键盘输入数字不会触发input事件的问题；input事件在el-input内被触发了，但是被el-input-number截断了

[wacky6]

那你期望的行为是什么。
用户未完成输入时不触发input-number的input有什么影响？如果有，需求是什么

[garveen]

期望触发input。
首先，必然有一部分用户的需求是获得input元素的input事件，不能因为包装而把原生事件吃掉了；
其次，原生input，el-input都能触发input事件，el-input-number不行，逻辑不一致；
第三，一个常见需求是网页前端做修改时，通过绑定向后端发请求，以同步用户设置，在此类页面，一般不提供保存按钮。一个很可能发生的操作是，用户做了修改，然后等了几秒（他认为设置已经同步了），然后关闭页面；此时来不及发起后端请求，或者后端请求被浏览器取消，则用户修改不会被保存。

需求是：用户通过键盘输入时，触发input事件，同时v-model绑定生效。

[wacky6]

如果input和v-model同时都有，那么0.0这样的输入必然被截断，于是用户输入0.03这样的值会有问题。目前来说，发射input会引起value更新，从而刷新组件状态。
另外，因为组件值是number，number 0.0和0是无法区分的。

我并不认为逻辑不一致，date-picker/select之类可以接受输入的组件也仅在用户完成输入后（change）后才发射input，不会发射中间值或无效值。

如果需要同步数据并且服务器响应需要到秒级，这更像是服务器太慢而不是前端应该考虑的问题。

如果需要知道用户做了输入，input-number可以考虑提供类似原生composition的事件，然后在这个事件中自行处理用户输入决定要不要更新组件value。

[wacky6]

@Leopoldthecoder 大佬怎么看这个问题？【对原始输入做特例】，从而判断输入完成（例如0.0）能足够可靠吗？

[garveen]

根据我对代码的理解，0.0发射input引起value更新从而刷新组件状态是可以避免的，在 handleInput 内，加入
if (newVal === oldVal) return
即可，正如判断小数点和减号一样。

逻辑不一致的点在于，data-picker和select都不是同一类原生元素的扩展，现在是原生的input元素及其扩展出来的el-input会发射input，然而el-input-number不会。

同步数据并不是服务器需要响应到秒级，而是当在el-input-number输入后，到用户关闭网页前，没有获得输入框内容的方法。

另外，如果仅仅将el-input发射出来的input事件再次发射出去，应该不会引起任何副作用。

[garveen]

handleInput方法是本次 向后不兼容 更新之前的方法，可以在某些特殊情况下在输入框内保留逻辑上相等的输入值（0, -0, 0.0, 0.00等）而不是破坏它。

[wacky6]

既然找到答案了的话就开个pr吧。记得写测试。

[Elfayer]

I'd like to add my use case: https://jsfiddle.net/9mbe0pbv/1/
When typing numbers in the input, the text aside does not update. I need to click away for it to update (or use the arrows).
Why is the input not emitting the input event? It makes the value not reactive to inputs, only to change... I am losing data-binding here. There isn't even an option.

[wacky6]

@Leopoldthecoder

See also: https://github.com/ElemeFE/element/pull/9690/

Patched: https://jsfiddle.net/9mbe0pbv/4/
Changes: https://github.com/wacky6/element/commit/1f1a0affb1ae860bb5413d09831d0d99ed3eea62

---

Greedily emit input (if parsed number is the same as text input: emit; otherwise, do not emit)

贪心的发射input，如果被发射出去的 number 的字符串形式和 input 里的一样，发射；如果不一样就把这个input吃掉（滑稽

[dukkee]

@wacky6 Why isn't your correct emit input in master?

[GF-Huang]

@Leopoldthecoder

See also: #9690

Patched: https://jsfiddle.net/9mbe0pbv/4/
Changes: wacky6@1f1a0af

Greedily emit input (if parsed number is the same as text input: emit; otherwise, do not emit)

贪心的发射input，如果被发射出去的 number 的字符串形式和 input 里的一样，发射；如果不一样就把这个input吃掉（滑稽

请问 merge 了吗

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.