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

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

Closed
b-d-k opened this issue May 25, 2022 · 9 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@b-d-k
Copy link

b-d-k commented May 25, 2022

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
Copy link
Contributor

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
Copy link
Author

b-d-k commented May 27, 2022

@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
Copy link
Contributor

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
Copy link
Author

b-d-k commented Jun 3, 2022

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
Copy link
Author

b-d-k commented Aug 30, 2022

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

@LinusBorg
Copy link
Member

#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 LinusBorg added 🐞 bug Something isn't working has workaround A workaround has been found to avoid the problem labels Aug 30, 2022
@LinusBorg
Copy link
Member

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.

@LinusBorg LinusBorg changed the title Form field attributes are removed in Vue instance button type="reset" won'T work correctly as various form field attributes are set through element properties, not as attributes Aug 30, 2022
@LinusBorg LinusBorg changed the title button type="reset" won'T work correctly as various form field attributes are set through element properties, not as attributes button type="reset" won't work correctly as various form field attributes are set through element properties, not as attributes Aug 30, 2022
@b-d-k
Copy link
Author

b-d-k commented Sep 8, 2022

@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
Copy link
Author

b-d-k commented Mar 17, 2023

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.

@haoqunjiang haoqunjiang added 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue labels Mar 21, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Jun 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants