button type="reset" won't work correctly as various form field attributes are set through element properties, not as attributes

[b-d-k]

Vue version

3.2.36

Link to minimal reproduction

sfc.vuejs.org

Steps to reproduce

• Optional: Make changes to the form.
• Click the Reset input.

What is expected?

The form fields should be set to or stay at their initial values
Select: "option two"
Checkbox: checked
Text: "text input value"

What is actually happening?

The select is set to first option and the other fields are cleared.

System Info

Reproducible in sfc.vuejs.org, code sandbox, Vue CLI, and custom build. 
Firefox, Chrome, Vivaldi.
Windows, Mac, Linux

Any additional comments?

Inspect the code to see that the attributes selected, checked and value="text input value" have been removed in the Vue instance.

[zhmushan]

Notice that changes made to the value of the option tag react directly to the DOM, while the Input tag does not. I'll write a patch to fix it.

[b-d-k]

@zhmushan I checked the fix and approved the PR yesterday. Is there anything else that I can do? Also, is the fix going into a release anytime soon?

[zhmushan]

The fix will not be released soon. There is a temporary solution that may be of interest to you:

<input type="text" ^value="text input value" />

[b-d-k]

The temp fix unfortunately doesn't seem feasible from a back-end perspective and I don't want to run a script that adds the properties back to the DOM.
Would you mind sharing your best guess as to when the fix will be released?

[b-d-k]

Any updates on this issue? It's still not fixed with release 3.2.38

[LinusBorg]

#6568

Which is why this issue is still open.

It seems it simply got unnoticed for a while and then moved too far back in the backlog. Should definitely be fixed though.

[LinusBorg]

I'd also be interested to understand why the workaround is not " feasable from a backend perspective" in order to better understand the impact.

Technically, forcing these props to be set as attributes (with the .attr modifier) is a valid workaround from our perspective.

[b-d-k]

@LinusBorg "Not feasible" was perhaps a bit of a strong statement. The form fields are rendered through a library in a Python/Django system, and it would require some research time to find out how to add the custom properties ^value, ^selected, and ^checked.
Since our resources are limited and this is a temporary Vue bug, I felt that it's not good time for my team to spend on.

Btw, a related issue with Vue being the "DOM police": When using the (invalid) value of % on an image width/height property, Vue converts it to "0".
E.g. <img src="image.png" width="90%"> results in <img src="image.png" width="0"> ...making the image invisible.

[b-d-k]

Getting close to 1 year anniversary. Would be great if this could be fixed instead of a workaround hack.
At least it should be added to the official documentation, so that it doesn't feel like a hack any longer. Maybe it's there already? I couldn't find it.