Create a setup-autocomplete modifier & usage

[JulienVannier66]

What does this PR do?

Implements a reusable Ember modifier that integrates Google Places Autocomplete with input elements for address autocompletion. The modifier automatically wraps input elements in a container, handles Google Maps API loading, and parses place results into structured address data.

Key features:

• Flexible element targeting: works with direct input elements or container elements with nested inputs
• Automatic DOM wrapper creation: wraps standalone inputs in a container div for proper Google Places styling
• Smart cleanup: properly unwraps elements and removes pac-container on modifier teardown
• Structured address parsing: converts Google Places results into standardized AutocompletionAddress format with address1, city, state, zipcode, country, and formattedAddress
• International address support: handles various address formats including postal_town, postal_code_suffix, and country-specific components
• Test-friendly: includes MockLoader for testing without actual Google Maps API calls
• Configurable autocomplete options
• Graceful error handling: handles missing callbacks and edge cases during cleanup

What are the observable changes?

Screencast.from.2026-01-26.11-59-50.webm

🧑‍💻 Developer Heads Up

⚡ Since we are using Ember Octane now:

• Feel free to migrate existing components to Glimmer Components.
• Write new ones exclusively in it.

Useful Resource : Ember Octane vs Classic Cheat Sheet

Good PR checklist

• Title makes sense
• Is against the correct branch
• Only addresses one issue
• Properly assigned
• Added/updated tests
• Added/updated documentation
• Migrated touched components to Glimmer Components
• Properly labeled

[linear]

VEL-7085 [ember-upf-utils] Create a setup-autocomplete modifier

[Miexil]

👏 💪 🥳

[Miexil]

this is never filled in ?

[JulienVannier66]

The value is setup when the parseAddressComponents is called. It happens in handlePlaceChanged in the setup-autocomplete.ts

private handlePlaceChanged(place: GooglePlaceResult): void {
    if (!place.address_components) return;

    const formattedAddress = this.targetInput?.value ?? '';
    this.result = parseAddressComponents(place.address_components, formattedAddress); // here
    this.callback?.(this.result);
  }

The formatted address is the one generate by google map. When you click on a address, google map add the formatted value in the input value directly. So I need to have the input to get this value. This is why I don't do it in the address-parser directly

[Miexil]

We are mapping all possible AddressComponentType yet AutocompletioinAddress is not using all of them ?

[JulienVannier66]

The AddressComponentType is the type attribute returned by google map, the AutocompletioinAddress is the one we use on our side.

The is a example of what google returns

[
    {
        "long_name": "75013",
        "short_name": "75013",
        "types": [
            "postal_code"
        ]
    },
    {
        "long_name": "France",
        "short_name": "FR",
        "types": [
            "country",
            "political"
        ]
    },
    {
        "long_name": "Île-de-France",
        "short_name": "IDF",
        "types": [
            "administrative_area_level_1",
            "political"
        ]
    },
    {
        "long_name": "Paris",
        "short_name": "Paris",
        "types": [
            "administrative_area_level_2",
            "political"
        ]
    },
    {
        "long_name": "Paris",
        "short_name": "Paris",
        "types": [
            "locality",
            "political"
        ]
    },
    {
        "long_name": "Avenue d'Italie",
        "short_name": "Av. d'Italie",
        "types": [
            "route"
        ]
    },
    {
        "long_name": "69",
        "short_name": "69",
        "types": [
            "street_number"
        ]
    }
]

[Miexil]

Nice 🥳

[Miexil]

do we want to verify the error case you are raising in the modifier when the target elem is not an input ?

[JulienVannier66]

I will add these missing test cases

[Miexil]

forgotten maybe ? can't see it :)

[JulienVannier66]

It is the two test case handles missing input element gracefully & handles missing input element in its children gracefully