From 4dda6d6576368399a3a17b77a9549cc25c46ce2c Mon Sep 17 00:00:00 2001
From: Scott Duncombe <srduncombe@gmail.com>
Date: Mon, 8 Jan 2024 19:46:16 -0800
Subject: [PATCH] Fix page nav issue (#79)

---
 src/components.d.ts                           |  2 ++
 src/components/form-report/form-report.tsx    |  1 +
 src/components/page-home/page-home.tsx        |  1 +
 .../ui-location-search/ui-location-search.tsx | 27 ++++++++++---------
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 005f405..7851244 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -98,6 +98,7 @@ export namespace Components {
     }
     interface UiLocationSearch {
         "error": string | null;
+        "inputId": string;
         "placeholder": string;
         "readOnly": boolean;
     }
@@ -456,6 +457,7 @@ declare namespace LocalJSX {
     }
     interface UiLocationSearch {
         "error"?: string | null;
+        "inputId"?: string;
         "onLocationSelected"?: (event: CustomEvent<{ formattedAddress: string; locationName: string }>) => void;
         "placeholder"?: string;
         "readOnly"?: boolean;
diff --git a/src/components/form-report/form-report.tsx b/src/components/form-report/form-report.tsx
index 8472410..ae5b570 100644
--- a/src/components/form-report/form-report.tsx
+++ b/src/components/form-report/form-report.tsx
@@ -359,6 +359,7 @@ export class FormReport {
                   onLocationSelected={({ detail }: CustomEvent) => {
                     this.handleLocationSelected(detail);
                   }}
+                  inputId="report-form"
                 />
                 <span class="help">Search by the name of the place ("St. John's Library") or street address.</span>
                 <p class="help has-text-red" hidden={"address" in this.submitError}>
diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx
index 62a9fea..5060c4d 100644
--- a/src/components/page-home/page-home.tsx
+++ b/src/components/page-home/page-home.tsx
@@ -60,6 +60,7 @@ export class PageHome {
               <ui-location-search
                 placeholder={(window?.document?.body?.clientWidth || 0) < 400 ? "Stuck in line? Search here" : "Stuck in a long line? Search your location here"}
                 onLocationSelected={handleLocationSelected}
+                inputId="homepage"
               />
             </div>
           </label>
diff --git a/src/components/ui-location-search/ui-location-search.tsx b/src/components/ui-location-search/ui-location-search.tsx
index eba126c..5c5b6b3 100644
--- a/src/components/ui-location-search/ui-location-search.tsx
+++ b/src/components/ui-location-search/ui-location-search.tsx
@@ -10,13 +10,16 @@ export class UiLocationSearch {
   @Prop() public error: string | null = null;
   @Prop() public readOnly: boolean = false;
   @Prop() public placeholder: string = "ex. St. John's Library";
+  @Prop() public inputId: string = `${Math.round(new Date().getTime() * Math.random() * 9999)}`;
 
   @State() public locationName: string = "";
   @Event() public locationSelected!: EventEmitter<{ formattedAddress: string; locationName: string }>;
 
   public componentDidRender() {
-    if (Build.isBrowser && google && document.getElementById("autocomplete-input")) {
-      const autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete-input") as HTMLInputElement, {
+    const autocompleteInput = document.getElementById(`autocomplete-input-${this.inputId}`) as HTMLInputElement;
+
+    if (Build.isBrowser && google && autocompleteInput) {
+      const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
         types: ["geocode", "establishment"],
         componentRestrictions: { country: "us" },
       });
@@ -34,7 +37,7 @@ export class UiLocationSearch {
         };
 
         Object.keys(componentForm).forEach(component => {
-          const elem = document.getElementById(component) as HTMLInputElement;
+          const elem = document.getElementById(`${component}-${this.inputId}`) as HTMLInputElement;
           if (elem) {
             elem.value = "";
           }
@@ -43,13 +46,13 @@ export class UiLocationSearch {
         place.address_components?.forEach((address_component: { [key: string]: any }) => {
           const addressType: string = address_component.types[0];
           const mapping = componentForm[addressType];
-          const elem = document.getElementById(addressType) as HTMLInputElement;
+          const elem = document.getElementById(`${addressType}-${this.inputId}`) as HTMLInputElement;
           if (mapping && elem) {
             elem.value = address_component[mapping];
           }
         });
 
-        const premise = document.getElementById("premise") as HTMLInputElement;
+        const premise = document.getElementById(`premise-${this.inputId}`) as HTMLInputElement;
         if (premise) {
           premise.value = place.name;
         }
@@ -76,7 +79,7 @@ export class UiLocationSearch {
           <input
             class={"input " + (!this.error ? "has-error" : "")}
             type="text"
-            id="autocomplete-input"
+            id={`autocomplete-input-${this.inputId}`}
             name="full_place"
             placeholder={this.placeholder}
             onInput={handleAddressChange}
@@ -89,32 +92,32 @@ export class UiLocationSearch {
               <tr>
                 <td class="label">Place</td>
                 <td colSpan={4}>
-                  <input class="input" id="premise" disabled={true} readOnly />
+                  <input class="input" id={`premise-${this.inputId}`} disabled={true} readOnly />
                 </td>
               </tr>
               <tr>
                 <td class="label">Street address</td>
                 <td class="slimField">
-                  <input name="street_number" class="input" id="street_number" disabled={true} readOnly />
+                  <input name="street_number" class="input" id={`street_number-${this.inputId}`} disabled={true} readOnly />
                 </td>
                 <td class="wideField" colSpan={2}>
-                  <input name="route" class="input" id="route" disabled={true} readOnly />
+                  <input name="route" class="input" id={`route-${this.inputId}`} disabled={true} readOnly />
                 </td>
               </tr>
               <tr>
                 <td class="label">City</td>
                 <td class="wideField" colSpan={3}>
-                  <input name="locality" class="input" id="locality" disabled={true} readOnly />
+                  <input name="locality" class="input" id={`locality-${this.inputId}`} disabled={true} readOnly />
                 </td>
               </tr>
               <tr>
                 <td class="label">State</td>
                 <td class="slimField">
-                  <input name="state" class="input" id="administrative_area_level_1" disabled={true} readOnly />
+                  <input name="state" class="input" id={`administrative_area_level_1-${this.inputId}`} disabled={true} readOnly />
                 </td>
                 <td class="label">Zip code</td>
                 <td class="wideField">
-                  <input name="zip" class="input" id="postal_code" disabled={true} readOnly />
+                  <input name="zip" class="input" id={`postal_code-${this.inputId}`} disabled={true} readOnly />
                 </td>
               </tr>
             </table>