[Feature Request] Standardize model types for empty fields
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
Related to https://github.com/vuetifyjs/vuetify/issues/4144, but this issue is more wide-ranging.
Consider VTextField:
- If you manually clear the field, then its
v-modelgets set to an empty string. - However, if you click on its "clear" icon, then
v-modelgets set tonull. - You can also set
v-model="theFieldModel", where istheFieldModelisundefined.
In short, there are (at least) three different model values/types which represent "there is nothing in this field".
This makes it difficult to interact with theFieldModel in a type-safe way:
- Having to type
theFieldModelasundefined | null | stringis unnecessarily verbose. - Does this typing include every possible type that
theFieldModelcould have?VTextField's model is typed asunknown, so I can't know for sure. If I overlook a type, then failing to account for it when typingtheFieldModelpotentially introduces a hard-to-find bug into my app. - Code which needs to know whether
theFieldModelis empty has to test for three possible values, which is verbose and confusing:const isEmpty = [undefined, null, ""].includes(theFieldModel.value)
Similar issues exist for many (most?) of Vuetify's other field types.
Proposed solution
Fundamentally, each field's model should have exactly one way (ideally, a single type) to represent "there is nothing in this field". Here's one way that could be realized:
Fields which accept a text value (e.g., VTextField and VTextarea) should use the empty string (and only the empty string) to represent the absence of a value. null and undefined should not be valid types for these fields' models.
Most (all?) other fields should use null to represent the absence of a value. undefined should not be a valid type for these fields' models.
Specific examples:
VCheckbox: Model isnullwhen the checkbox is in the "indeterminate" state.VRadioGroup: Model isnullwhen no button in the group is selected.VSelect: Model isnullwhen the placeholder option is selected.VBtnTogglewithmandatory="false": Model isnullwhen no button is selected.
Of course, this would be a breaking change.
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
Review the linked pull request #21055 and the model behavior of VTextField, VTextarea, VCheckbox, VRadioGroup, VSelect, and VBtnToggle. Done means the affected fields consistently represent empty values with the agreed model types and their TypeScript models reflect that behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100