vuetifyjs / vuetifyjs/vuetify

[Feature Request] Standardize model types for empty fields

Open
#21,682 1 comment 1 reaction 0 assignees View on GitHub

@johnleider is already working on this.

Since Mar 3, 2025.

  • #21055 by @johnleider — open
T: feature
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-model gets set to an empty string.
  • However, if you click on its "clear" icon, then v-model gets set to null.
  • You can also set v-model="theFieldModel", where is theFieldModel is undefined.

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 theFieldModel as undefined | null | string is unnecessarily verbose.
  • Does this typing include every possible type that theFieldModel could have? VTextField's model is typed as unknown, so I can't know for sure. If I overlook a type, then failing to account for it when typing theFieldModel potentially introduces a hard-to-find bug into my app.
  • Code which needs to know whether theFieldModel is 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 is null when the checkbox is in the "indeterminate" state.
  • VRadioGroup: Model is null when no button in the group is selected.
  • VSelect: Model is null when the placeholder option is selected.
  • VBtnToggle with mandatory="false": Model is null when no button is selected.

Of course, this would be a breaking change.

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.