vuetifyjs / vuetifyjs/vuetify

[Bug Report][4.2.1] VAutocomplete clears its selection when the search text is emptied, ignoring clearable=false

Open
#23,175 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VAutocomplete has workaround T: feature
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
  1. Open the reproduction. The select holds Gallery and clearable is false.
  2. Click the field. Vuetify seeds the search text with the selected item's title.
  3. Select all and press Delete, or hold Backspace until the text is empty.
  4. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.