conditional change of <input> type attribute not working.

[trusktr]

Version

2.4.2

Reproduction link

https://jsfiddle.net/trusktr/50wL7mdz/52198/

Steps to reproduce

Try to type in the text field. It will keep clearing your input every second.

What is expected?

It should toggle between showing and hiding the password.

What is actually happening?

It is destroying the input (or clearing its value) each time the value of hidden changes.

[trusktr]

Using v-if/v-else also doesn't work as would be intuitively expected: https://jsfiddle.net/trusktr/50wL7mdz/52199

Why is it not dom-diffing and applying the change only to the attribute value like one would expect?

[trusktr]

Here's the same thing, broken, using a self-closing input tag: https://jsfiddle.net/trusktr/50wL7mdz/52202/

[trusktr]

Here's a fiddle showing that it works with vanilla HTML/JS: https://jsfiddle.net/trusktr/50wL7mdz/52205/

This raises the concern that Vue is not dom diffing like it claims. If it were, then only the type attribute would end up modified, and the value inputted text would remain inside the input.

[trusktr]

@syropian suggested to add a dummy v-model as a workaround, which works, but that's not intuitive and is wasteful: https://jsfiddle.net/50wL7mdz/52203

[nickmessing]

@trusktr, because type attribute on input is very special this is expected behaviour without v-model. You cannot carry same value around (think of input[type="file"] or even input[type="number"]).

[trusktr]

@nickmessing That's not intuitive, please fix.

This is the sort of thing that should work in Vue because it works in the browser.

Sure, switching from password to file won't work, and in that case you could re-render. I would do whatever the browser actually does. Otherwise Vue isn't dom diffing like one would assume.

But switching to text should work. Vue can make this intuitively easy. (Isn't it a framework like Vue's goal to make these things easy?).

[trusktr]

Do you not see the fact that someone telling me to unituitively use v-model as a workaround is a problem?

It is frustrating when a library's issue gets closed if the library author can easily improve the library for the benefit of all the users at the cost of a small one-time extra effort on the library author's side, and when the library author chooses perhaps author convenience over true benefit of the user.

You could instead leave this open and suggest a PR he made. That's much better a choice.

[nickmessing]

@trusktr, Well, re-rendering diffs indeed, let's imagine a simple scenario.
Step 1. First render, DOM looks like:

<input type="text" />

Step 2. You add some text, DOM looks like (consider that value is describing a domProp and not attr here)

<input type="text" domProp-value="asdasd" />

Step 3. You change hidden so now vue should calculate the diff and apply it between this 2:

<input type="text" domProp-value="asdasd" />
<input type="password" />

Result: value gets removed. This is intuitive if you understand virtual dom based re-rendering. It does remove value because there is no value in new input. v-model helps only because it is replaced by :value="str" @input="str = $event.target.value and as you see we have value.

[trusktr]

That example isn't really applicable to my case, and you also mentioned some implementation details that end users don't need to care about.

The case is simple: if the only thing changing is type password to type text or vice versa, then you can optimize by DOM diffing as expected in that case, and end users won't run into unexpected behavior.

Another way to put it is: if I can simply change from type password to type text when using vanilla DOM+JS, then it should be as simple in Vue too, because Vue is(should be) an extension of what people expect from vanilla DOM.

Honestly this is good enough reason to make this optimization on your end, in this case and any other similar cases, to make it as intuitive as possible for end users.

[trusktr]

I've updated the title to remove the question mark.

Even with the v-model hack, DOM Diffing is not working. Vue is destroying the existing input element and creating a whole new one (rather than just modifying the type attribute).

---

This is REALLY bad.

---

This destroys interoperability with outside code. For example, bootstrap validator stops working because it will have a reference to a no-longer-existing input element.

---

If Vue is supposed to be incrementally adoptable, and interoperable with outside code (f.e. jQuery plugins) then this simply is not acceptable.