From 3c43f72028fa579a6209d470f50383ded42ac11d Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Mon, 9 Mar 2026 18:28:03 +0000
Subject: [PATCH] Fix reference to full formatted address

---
 html/static/js/address-suggestion.js | 96 ++++++++++++++--------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/html/static/js/address-suggestion.js b/html/static/js/address-suggestion.js
index e793d6bc..61608c58 100644
--- a/html/static/js/address-suggestion.js
+++ b/html/static/js/address-suggestion.js
@@ -5,14 +5,14 @@ class AddressInput extends HTMLElement {
 	constructor() {
 		super();
 
-		this.attachShadow({mode: "open" });
+		this.attachShadow({ mode: "open" });
 		this.internals = this.attachInternals();
 		this.render();
 
 		// Element references
 		this._input = this.shadowRoot.querySelector("input");
 		this._suggestions = this.shadowRoot.querySelector(".suggestions-container");
-		
+
 		// Bind methods
 		this._handleInput = this._handleInput.bind(this);
 
@@ -30,30 +30,30 @@ 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) {
 		if (this._input) {
 			this._input.value = val;
@@ -63,87 +63,89 @@ class AddressInput extends HTMLElement {
 		}
 	}
 
-	 // Private methods
+	// Private methods
 	_handleInput(event) {
 		const searchText = event.target.value.trim();
 
 		// Clear previous timer
 		clearTimeout(this._debounceTimer);
-		
+
 		// 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)
-				.then(response => {
-					this._renderSuggestions(response.features);
-				});
+			this._fetchAddressSuggestions(searchText).then((response) => {
+				this._renderSuggestions(response.features);
+			});
 		}, 300);
-		
 	}
 
 	async _fetchAddressSuggestions(text) {
 		try {
 			const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(text)}&access_token=${this._apiKey}`;
-			
+
 			const response = await fetch(url);
 			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) => {
-			if (item.properties.place_formatted != "") {
-				return `
+		this._suggestions.innerHTML = suggestions
+			.map((item, index) => {
+				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>`
-			} else {
-				return `
+					</div>`;
+				} else {
+					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>`
-			}
-		}).join('');
-		
+					</div>`;
+				}
+			})
+			.join("");
+
 		// Add click listeners to suggestions
-		this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => {
-			el.addEventListener('click', e => {
+		this.shadowRoot.querySelectorAll(".suggestion-item").forEach((el) => {
+			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', {
-					bubbles: true,
-					composed: true, // Allows event to cross shadow DOM boundary
-					detail: {
-						location: suggestion
-					}
-				}));
+				this.dispatchEvent(
+					new CustomEvent("address-selected", {
+						bubbles: true,
+						composed: true, // Allows event to cross shadow DOM boundary
+						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>
 				@import url('/static/vendor/css/bootstrap.min.css');
@@ -192,15 +194,15 @@ class AddressInput extends HTMLElement {
 	// Public methods
 	clear() {
 		if (this._input) {
-			this._input.value = '';
-			this._suggestions.innerHTML = '';
+			this._input.value = "";
+			this._suggestions.innerHTML = "";
 		}
 	}
 
 	SetValue(suggestion) {
-		this.value = suggestion.properties.full_address;
-		this._suggestions.innerHTML = '';
+		this.value = suggestion.properties.formatted_address_line;
+		this._suggestions.innerHTML = "";
 	}
 }
 
-customElements.define('address-input', AddressInput);
+customElements.define("address-input", AddressInput);