Autocomplete fixes (race condition, prevent autofill, style fixes) (#173

)

* add logic to cancel in-flight autocomplete requests to fix race condition

* disable browser autofill and prevent css changes on powered by

src/api/search.ts

@@ -12,7 +12,7 @@ import type {
 } from '../types';
 
 class SearchAPI {
-  static async autocomplete(params: RadarAutocompleteParams): Promise<RadarAutocompleteResponse> {
+  static async autocomplete(params: RadarAutocompleteParams, requestId?: string): Promise<RadarAutocompleteResponse> {
     const options = Config.get();
 
     let {
@@ -45,6 +45,7 @@ class SearchAPI {
         expandUnits,
         mailable,
       },
+      requestId,
     });
 
     const autocompleteRes = {

src/http.ts

@@ -25,6 +25,8 @@ interface HttpResponse {
   data: any;
 }
 
+const inFlightRequests = new Map<string, XMLHttpRequest>();
+
 class Http {
   static async request({
     method,
@@ -34,6 +36,7 @@ class Http {
     version,
     headers = {},
     responseType,
+    requestId,
   }: {
     method: HttpMethod;
     path: string;
@@ -42,6 +45,7 @@ class Http {
     version?: string;
     headers?: Record<string, string>;
     responseType?: XMLHttpRequestResponseType;
+    requestId?: string;
   }) {
     return new Promise<HttpResponse>((resolve, reject) => {
       const options = Config.get();
@@ -79,9 +83,22 @@ class Http {
         body = undefined; // dont send body for GET request
       }
 
+      // check for in-flight requests with matching requestIds
+      if (requestId) {
+        const request = inFlightRequests.get(requestId);
+        if (request) {
+          request.abort(); // abort request
+        }
+      }
+
       const xhr = new XMLHttpRequest();
       xhr.open(method, url, true);
 
+      // save reference to request
+      if (requestId) {
+        inFlightRequests.set(requestId, xhr);
+      }
+
       const defaultHeaders = {
         'Authorization': publishableKey,
         'Content-Type': 'application/json',
@@ -109,6 +126,11 @@ class Http {
 
       xhr.onload = () => {
         let response: any;
+
+        if (requestId) { // clear in-flight request
+          inFlightRequests.delete(requestId);
+        }
+
         try {
           if (xhr.responseType === 'blob') {
             response = { code: xhr.status, data: xhr.response };

src/ui/autocomplete.ts

@@ -168,6 +168,9 @@ class AutocompleteUI {
       this.container.appendChild(this.wrapper);
     }
 
+    // disable browser autofill
+    this.inputField.setAttribute('autocomplete', 'off');
+
     // set aria roles
     this.inputField.setAttribute('role', 'combobox');
     this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
@@ -263,7 +266,7 @@ class AutocompleteUI {
       onRequest(params);
     }
 
-    const { addresses } = await SearchAPI.autocomplete(params);
+    const { addresses } = await SearchAPI.autocomplete(params, 'autocomplete-ui');
     return addresses;
   }
 

styles/radar.css

@@ -185,12 +185,12 @@
 }
 
 .radar-powered a {
-  text-decoration: none;
-  color: var(--radar-gray6);
+  text-decoration: none !important;
+  color: var(--radar-gray6) !important;
 }
 
 .radar-powered a:visited {
-  color: var(--radar-gray6);
+  color: var(--radar-gray6) !important;
 }
 
 .radar-powered #radar-powered-logo {
@@ -211,3 +211,6 @@
 .maplibregl-ctrl-attrib.hidden {
   display: none !important;
 }
+.maplibregl-popup-close-button:focus-visible {
+  outline: none;
+}