vuetifyjs/vuetify

[Bug Report][3.7.2] Browser address autofill not populating states or countries

Open

#20560 opened on Oct 8, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VAutocompleteC: VSelectT: buggood first issue

Description

Environment

Vuetify Version: 3.7.2 Vue Version: 3.5.11 Browsers: Firefox 131.0 OS: Windows 10

Steps to reproduce

  1. Add a saved address in your browser's settings.
  2. Load the selected demo. It includes two different address forms - one with a <v-select> for states and countries, the other with a <v-autocomplete>.
  3. Click into the Name field for one of the forms and select the saved address.

Expected Behavior

All fields should be populated from the saved address in the browser.

Actual Behavior

The "State" and "Country" fields are not populated.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

There are a couple of other issues reporting this, but they all appear to have been closed - including one that was closed as "Complete". I am using the latest version of Vuetify and it isn't actually fixed.

After searching on this issue, I have seen some suggestions that a <v-autocomplete> should be used instead of a <v-select>, but as seen in the demo, neither one actually works.

Contributor guide

Tech stack
vuetypescripthtml
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of Vue.jsFamiliarity with Vuetify componentsUnderstanding of browser autofill behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Examine the reproduction link provided in the issue to understand the exact behavior. Investigate Vuetify's v select and v autocomplete source code to see how they render input elements and whether they set the autocomplete attribute. Look for previous closed issues related to autofill to see if there were attempted fixes. The fix likely involves adding appropriate autocomplete attributes (e.g., 'address level1', 'country') to the underlying input fields to allow browser autofill to populate them. Check if there is a need to manually trigger autofill events after the component initializes.