vuetifyjs / vuetifyjs/vuetify

[Bug Report][3.4.3] VForm cause wrong validation state when name attribute of VInputs are updated, because of duplicated id and leaked id.

Open
#18,759 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VForm C: VInput E: validation has workaround T: bug
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
  1. If you input '1' in all 6 text fields, then SUBMIT button becomes active.
  2. Then. If you erase First Name at last row of table, then validation error occur and SUBMIT button becomes inactive.
  3. Then. If you push insert button at last row of table, then row is inserted above the last row.
  4. 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.

https://play.vuetifyjs.com/#eNrNV9tu20YQ/ZWpGkASqouD5CWqosZFaiDoFU7gF1mNV+RK2phcsrtLxYKg9/af8k/5hc7skhRFrhw7iYG8SORw9sx9dma6bWkVDE/TdLDOeGvUGhsepxEzfHIpAcbrPktT+2hfgkQaJiRXOQmJF2eJimHdj5OQR88vW0JfsEiEl62SBZkKUPg+5AuWRQYZF3jupXt7HSXmL5Wk+uAUAFOKbSCZv+OBAeIfzxUMD1g+fvhXspgDM0aJeYYikgVcvOE35kzwKEQIDuEGWUTAomgDwYrJJYf3Ky6BheEQleaGVxFV8v7jh/+qlPHFGzaPnEcqVLPiLKwRibx3zgHz5DemDfyByo6H+ObnORPq00yncZJJc5ShqZMz4mcjIVU85TLsC4wkxiAORT+NMvQ7vAgiEVwjLc306pc4NZtXGLXLlg8LYEJc4yFh+hh8eg09iiGx7i0yq+nXsZkn4cbn7KakdR9TBQ3pCImZSlb0QMiQ33TxL8+mU8osn3Gja76hLC6ODvC9yXcvv5fJ6HfliPIXRV6lPEkjHnKssOjto61Vefc2wqwhjqtjoRjZyuuvWZQRzF5zQT90nNLp2OkXWRpiYdZA7D88n4D7SnDoTdSnB+0Csd0Dy9Y9qpjKIq4RbdpxjARonwZYq3GnO4i4XJoVTOAEfgKjUOQI2uf8n0woHg7aMDsGHbMbdxbRH58cVWAlJHWaK9shnsNnOjjlSgttuDR9AvQxHfakWxL+4fJkQZ3jCxLFnv+6mVJCfuup8g2Ej9me/pmxc4e/XuAc3t2j5vjP6e0uYXj6gFG44yUnpObKlNecs/yooRPHfq/77hZlYiEPtVE8TtaVEBxXxHE+1MXbuGNRUHP0aQ5hzlKzSSmxdDaPBSYjjEKh6XCIxO/KsRAM1kmVrQblAX8p1iLkDbqH0zunBSw1IpENH7jJ1ZYSaEPTaYeGTFgLLeYiEgZHzwVOisxAwDLNwayEhnm2hG7dc34RvlGQ5jcRguJLulKwd9FMYjXxznPEjkUosEQR36npYfSF06Al+SRETYLk+EZu20H0wFY6BS2ff2xvOZzi9xptt5AzwG53RO8QpYtFCVVuBX/+6k9Ie4BHmpfoXKlE/c61ZkuuB+8SITvYktpdJ7MxIdZd4Mld5KluNzkXOb9YcYb1HYcobgU6OIyvOlAiNaC5yVKIcKtAW02xwYg4TZSBLQZ60bOVAed8ATtYqCSGNu5a7R8JBbveENYUF+q1B2Gmj6gLrgO583CCQbTOgqGTuvvTuK8AnmNWipUtMbEWLOBAHQW2zrRibBshuhJy2XPk8o6u0V1LL4hE29Xk7fVbcvRWfoegkp0u3s3ueQKdbUVyG+NXEUivhZz24zbsKlZZl2H5kWv61jy3DFJm1Iws7sLC0pqOyIsfRxiLhgs81tcMd1ZbTL2J50kEJoFrzlMrAruSNNgnHA9WDh6zXLm/PC4qlS38tCeQs6oKV93a6eZxsUJeWyGdNumAhLbtRzv8zZ1n8+kwRpW1J8+jqQNsaFaKOvZl1gWmKZ3H5ZfpzNaEFe7mCeAsWFUW8b0m+3mDfGDvuxHILJ5z1cPbMsFx22xcTNA2TAG3wWF5jIDJjR0Ncz9VjHINbGrhZranTatYM5SFHJhftcAcbLsuKLfgD4i943EMZW5eInnNHg4YDVNvF6NTnAx4MY+d9HyxaIjcTxFfJO1xCVwUPM51VIquMrwxrQyAKDvPLDfKY467Urr3TJ+noQ9m+Pf0pP9s9sOj4cBwbYqlYY/ySqaZAclMpliUOyFHnFErd80bk7a167WeDJ4MnrXo/+ngaWv2P8opfSM=

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.