Skip to content

fix(VAutocomplete): populate input with selected item title on initial render#22954

Closed
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/autocomplete-input-value-22270
Closed

fix(VAutocomplete): populate input with selected item title on initial render#22954
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/autocomplete-input-value-22270

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Fixes #22270

Summary

VAutocomplete did not show the selected item's text in the input on initial render when a value was set via v-model or :model-value. The input only became populated after the user first focused the component.

Root cause

search (the text shown in the underlying input) was initialized to '' and was only updated to reflect the selected item's title inside the watch(isFocused) handler — which only fires on user interaction.

VCombobox already handles this correctly by initializing _search eagerly from the model value and watching model for external changes.

Fix

Added a watch(model, ..., { immediate: true }) in VAutocomplete.tsx that mirrors the VCombobox pattern:

watch(model, value => {
  if (!isFocused.value && !props.multiple && !hasSelectionSlot.value) {
    search.value = value.at(-1)?.props.title ?? ''
  }
}, { immediate: true })

Guards match the same conditions used in the focus watcher's focus-in branch:

  • !isFocused.value — avoids overwriting the user's live typing
  • !props.multiple — multiple-select doesn't show a single title in the input
  • !hasSelectionSlot.value — chips/custom selection slots render separately

@J-Sek

J-Sek commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

Is it better than #22757?

@sridhar-3009

Copy link
Copy Markdown
Contributor Author

They solve different aspects of the same issue:

Both are complementary. If #22757 lands first, this PR's fix still addresses the visual "input is empty until focused" experience. That said, if the team prefers the hidden-select pattern as the canonical approach for VAutocomplete, happy to close this in favour of #22757.

@J-Sek

J-Sek commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

closing in favor of #23022

@J-Sek J-Sek closed this Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][3.10.7] VAutocomplete's input value

2 participants