[Bug Report][3.4.3] VForm cause wrong validation state when name attribute of VInputs are updated, because of duplicated id and leaked id.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 3.4.3
Vue Version: 3.3.8
Browsers: Chrome 119.0.0.0
OS: Windows 10
Steps to reproduce
- If you input '1' in all 6 text fields, then SUBMIT button becomes active.
- Then. If you erase First Name at last row of table, then validation error occur and SUBMIT button becomes inactive.
- Then. If you push insert button at last row of table, then row is inserted above the last row.
- Then. Please input '1' in all 9 text fields.
Expected Behavior
After step 4 submit button becomes active. Any error doesn't occur.
Actual Behavior
Vuetify: Duplicate input name "peopledetail_1_amount" error occur in step 3.
After step 4 submit button still is inactive.
Other comments
VForm use name attribute as inner id. This inner id is registered when VInput mount, and unregistered when VInput unmount. But when name attribute of VInput is reactive and changed with VInput is the same component, inner id in VForm becomes incorrect because VForm don't reregister id nor make id reactive, either should be done. So, in this reproduction sample, duplicated inner id occur. In another steps (delete row), leaked inner id also occur. This is the cause of this bug, I think.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the VForm and VInput registration behavior described in the issue, then reproduce the linked Vuetify Playground case, especially the reactive name changes and row insertion or deletion. Done means changing an input name re-registers the correct inner id, removes leaked ids, and the submit button becomes active after all fields are valid without duplicate-name errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100