Element: [Bug Report] el-input :value binding has inconsistent and unexpected update behavior

[tessaSAC]

Element UI version

2.0.11

OS/Browsers version

Mac 10.13.5 / Chrome 67.0.3396.87

Vue version

2.5.2

Reproduction Link

codesandbox

Steps to reproduce

In the NEW COLUMN NAME field, add ONLY symbol characters to the string then click out of the field.

What is Expected?

On first blur, the form fields are run through an autocorrect function that runs if only the NEW COLUMN NAME field has been touched.

On first blur the input should be moved to the NEW COLUMN LABEL field, and NEW COLUMN NAME field's input should update to show the input without the symbols.

The expected behavior can be witnessed by inputting alphanumeric characters in addition to symbols or changing the el-input tag to the plain HTML input tag.

What is actually happening?

The input is correctly copied over to the NEW COLUMN LABEL input.

The NEW COLUMN NAME data properties in both the component itself and its parents, events emitted, console.logs, etc. all display the correctly sanitized value (and in a repl the autocorrect method works 100% of the time).

However, the words visible on the screen are the non-autocorrected name. On second blur, the data properties, etc. are all updated to match this incorrect old value.

If I change from binding to :value to v-model, I am able to see the expected autocorrect behavior but lose the ability to delay Vuelidation until on blur. If I change to an input tag I am able to see the expected behavior while binding to :value.

The only difference between the two cases as far as I can tell is if you update with symbols only then it adds an empty string instead of any sanitized characters to the input value. However I'm not sure why this would be an issue.

This may be related to the following two issues as well (I am not sure as I cannot read Chinese):

• https://github.com/ElemeFE/element/issues/4956 (I was unable to use the first recommended method This is why I needed to use the method of binding to value for Vuelidation on blur which is to use the trim modifier)
• https://github.com/ElemeFE/element/issues/11548

[tessaSAC]

Update: I tried faking some of the expected behavior with a normal input tag.

[wacky6]

Well, I agree the issue you face is due to historically bad design, el-input maintains an internal 'currentValue', which is shown to the user (not the :value binding).

To elegantly fix this, I suspect major refactoring is required, which is likely to be considered in 3.0 milestone.

[wacky6]

Related: https://github.com/ElemeFE/element/issues/12850

[tessaSAC]

Thanks @wacky6! Do you have any favorite resources on this subject? I tried playing with bindings on a normal HTML input field on my own time and ran into the same issue and am wondering if I (and possibly a component author?) are potentially misunderstanding how input works.

[wacky6]

I am not entirely sure what subject you are referring to.

It should be noted that Vue's value and input event are distinct from those of native HTML component.

If you want to dig into native HTML input event, refer to W3C HTML specification.

If you want to know how Vue's input event works, refer to Vue's documentation - custom compoment page.

[tessaSAC]

Thanks @wacky6! I was referring to how Vue's value and input event interacts with the native DOM element. Are they completely distinct then? Should I only look at Vue's?

[wacky6]

They are unrelated to native DOM's input and value.

[mu-yu]

this PR #13471 resolved my issue for https://jsfiddle.net/cqrz810j/ (type while value length greater than 10, the value length is 10, but the text is not cut down. the length is a tiny example in the jsfiddle, there are complex rules to cut down the value in the business. )

but when will this be released and what we can do as workaround before release ? @wacky6

[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.