[Bug Report][4.2.1] VAutocomplete clears its selection when the search text is emptied, ignoring clearable=false
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: 4.2.1
Vue Version: 3.5.42
OS: Linux
Steps to reproduce
- Open the reproduction. The select holds Gallery and clearable is false.
- Click the field. Vuetify seeds the search text with the selected item's title.
- Select all and press Delete, or hold Backspace until the text is empty.
- The model becomes null and 'emitted: null' appears, though clearable is false.
Expected Behavior
With clearable=false the selection should survive an emptied search text: no update:modelValue is emitted, and the field repaints the selected item. This is what VSelect does - its Backspace clear is gated on props.clearable.
Actual Behavior
Emptying the search text emits update:modelValue: null whatever clearable is set to. Bound to a non-nullable value, such as a required enum column, that null reaches the model and has to be filtered out by the consumer.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Prior issues I found first, so this is not a rehash of either: - #17608 asked that the model not change until a selection is made or the field is blurred, and was closed as working as intended. That settles the timing of the change. This report asks a different question: whether the clearing should happen at all while clearable is false. - #5917 requested the clear-on-empty-search behaviour originally, so the behaviour itself is clearly deliberate. What looks inconsistent is that VSelect gates the very same gesture on the very same prop, and VAutocomplete does not. VSelect, keydown handler: case 'Backspace': if (!props.clearable) break; VAutocomplete, onUpdateModelValue: if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [] props.clearable is never read on that path; in VAutocomplete it only reaches the clear icon (onClick:clear). So clearing the selection from the keyboard honours clearable in VSelect and ignores it in VAutocomplete. Same in 4.1.12 and 4.2.1. Why it matters: clearable=false is the documented way to say a field has no clear affordance, and a select bound to a non-nullable value, such as a required enum column, has no reading for null at all. The consumer ends up filtering the null out in a setter, which then leaves VAutocomplete holding a stale selectionIndex - model.value.length is still 1 in single mode - so the next Backspace wipes the whole typed search term and hides the caret through v-autocomplete--selecting-index. That second half looks like the single-select counterpart of #20796, which was accepted as a bug and fixed for multiple. If the clearing is meant to happen even with clearable=false, an opt-out prop would serve; the VSelect precedent suggests clearable is already the intended switch.
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 linked reproduction and compare the VAutocomplete onUpdateModelValue path with the VSelect keydown handler described in the report. Reproduce the empty-search action with clearable=false, then verify that the selection remains and no update:modelValue: null is emitted while existing clearable behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100