Fix reference to full formatted address

html/static/js/address-suggestion.js

@@ -5,7 +5,7 @@ class AddressInput extends HTMLElement {
 	constructor() {
 		super();
 
-		this.attachShadow({mode: "open" });
+		this.attachShadow({ mode: "open" });
 		this.internals = this.attachInternals();
 		this.render();
 
@@ -30,28 +30,28 @@ class AddressInput extends HTMLElement {
 
 	// Lifecycle: when element is removed from the DOM
 	disconnectedCallback() {
-		this._input.removeEventListener('input', this._handleInput);
+		this._input.removeEventListener("input", this._handleInput);
 	}
 
 	// Lifecycle: watch these attributes for changes
 	static get observedAttributes() {
-		return ['placeholder', 'api-key'];
+		return ["placeholder", "api-key"];
 	}
 
 	// Lifecycle: respond to attribute changes
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (name === 'placeholder' && this._input) {
+		if (name === "placeholder" && this._input) {
 			this._input.placeholder = newValue;
 		}
 
-		if (name === 'api-key') {
+		if (name === "api-key") {
 			this._apiKey = newValue;
 		}
 	}
 
 	// Properties API
 	get value() {
-		return this._input ? this._input.value : '';
+		return this._input ? this._input.value : "";
 	}
 
 	set value(val) {
@@ -63,7 +63,7 @@ class AddressInput extends HTMLElement {
 		}
 	}
 
-	 // Private methods
+	// Private methods
 	_handleInput(event) {
 		const searchText = event.target.value.trim();
 
@@ -72,18 +72,16 @@ class AddressInput extends HTMLElement {
 
 		// Clear suggestions if input is less than 3 characters
 		if (searchText.length < 3) {
-			this._suggestions.innerHTML = '';
+			this._suggestions.innerHTML = "";
 			return;
 		}
 
 		// Debounce API calls (wait 300ms after typing stops)
 		this._debounceTimer = setTimeout(() => {
-			this._fetchAddressSuggestions(searchText)
+			this._fetchAddressSuggestions(searchText).then((response) => {
-				.then(response => {
+				this._renderSuggestions(response.features);
-					this._renderSuggestions(response.features);
+			});
-				});
 		}, 300);
-		
 	}
 
 	async _fetchAddressSuggestions(text) {
@@ -94,55 +92,59 @@ class AddressInput extends HTMLElement {
 			const data = await response.json();
 			return data;
 		} catch (error) {
-			console.error('Error fetching geocoding suggestions:', error);
+			console.error("Error fetching geocoding suggestions:", error);
 		}
 	}
 
 	_renderSuggestions(suggestions) {
 		console.log("Rendering suggestions", suggestions);
-		this._suggestions.innerHTML = suggestions.map((item, index) => {
+		this._suggestions.innerHTML = suggestions
-			if (item.properties.place_formatted != "") {
+			.map((item, index) => {
-				return `
+				if (item.properties.place_formatted != "") {
+					return `
 					<div class="suggestion-item list-group-item"
 						data-index="${index}"
 						data-lat="${item.geometry.coordinates[1]}"
 						data-lng="${item.geometry.coordinates[0]}">
 							<div class="main-address">${item.properties.name || item.properties.full_address}</div>
 							<div class="place-info">${item.properties.place_formatted}</div>
-					</div>`
+					</div>`;
-			} else {
+				} else {
-				return `
+					return `
 					<div class="suggestion-item list-group-item"
 						data-index="${index}"
 						data-lat="${item.coordinates.lat}"
 						data-lng="${item.coordinates.lng}">
 							<div class="main-address">${item.properties.name || item.properties.full_address}</div>
 							<div class="place-info">${item.properties.place_formatted}</div>
-					</div>`
+					</div>`;
-			}
+				}
-		}).join('');
+			})
+			.join("");
 
 		// Add click listeners to suggestions
-		this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => {
+		this.shadowRoot.querySelectorAll(".suggestion-item").forEach((el) => {
-			el.addEventListener('click', e => {
+			el.addEventListener("click", (e) => {
 				const index = parseInt(el.dataset.index);
 				const suggestion = suggestions[index];
 				this.SetValue(suggestion);
 				// Dispatch custom event
-				this.dispatchEvent(new CustomEvent('address-selected', {
+				this.dispatchEvent(
-					bubbles: true,
+					new CustomEvent("address-selected", {
-					composed: true, // Allows event to cross shadow DOM boundary
+						bubbles: true,
-					detail: {
+						composed: true, // Allows event to cross shadow DOM boundary
-						location: suggestion
+						detail: {
-					}
+							location: suggestion,
-				}));
+						},
+					}),
+				);
 			});
 		});
 	}
 
 	// Initial render of component
 	render() {
-		const placeholder = this.getAttribute('placeholder') || 'Enter address';
+		const placeholder = this.getAttribute("placeholder") || "Enter address";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -192,15 +194,15 @@ class AddressInput extends HTMLElement {
 	// Public methods
 	clear() {
 		if (this._input) {
-			this._input.value = '';
+			this._input.value = "";
-			this._suggestions.innerHTML = '';
+			this._suggestions.innerHTML = "";
 		}
 	}
 
 	SetValue(suggestion) {
-		this.value = suggestion.properties.full_address;
+		this.value = suggestion.properties.formatted_address_line;
-		this._suggestions.innerHTML = '';
+		this._suggestions.innerHTML = "";
 	}
 }
 
-customElements.define('address-input', AddressInput);
+customElements.define("address-input", AddressInput);