fix: have Place Picker update input when performing fallback search

PiperOrigin-RevId: 563238912
googlemaps · Sep 6, 2023 · 5533390 · 5533390
1 parent ab5270b
commit 5533390
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/place_picker/place_picker.ts b/src/place_picker/place_picker.ts
@@ -424,10 +424,9 @@ export class PlacePicker extends BaseComponent {
         throw error;
       }
     }
-    return places.length === 0 ?
-        null :
-        (await places[0].fetchFields({fields: [...PLACE_DATA_FIELDS]})).place as
-            Place;
+    if (!places.length) return null;
+    await places[0].fetchFields({fields: [...PLACE_DATA_FIELDS]});
+    return places[0] as Place;
   }
 
   /** Looks up a Place using the GA API. */
@@ -476,9 +475,24 @@ export class PlacePicker extends BaseComponent {
     this.disableSearch = true;
     try {
       this.valueInternal = await this.search(this.inputElement.value);
+      if (this.valueInternal) this.updateInputTextFromPlace(this.valueInternal);
     } catch (error: unknown) {
       const requestErrorEvent = new RequestErrorEvent(error);
       this.dispatchEvent(requestErrorEvent);
     }
   }
+
+  private updateInputTextFromPlace(place: Place) {
+    let newText;
+    if (place.formattedAddress && place.displayName) {
+      if (place.formattedAddress.startsWith(place.displayName)) {
+        newText = place.formattedAddress;
+      } else {
+        newText = `${place.displayName}, ${place.formattedAddress}`;
+      }
+    } else {
+      newText = place.displayName ?? place.formattedAddress ?? '';
+    }
+    if (newText) this.inputElement!.value = newText;
+  }
 }
diff --git a/src/place_picker/place_picker_test.ts b/src/place_picker/place_picker_test.ts
@@ -34,7 +34,11 @@ const FAKE_PLACE_RESULT_FROM_AUTOCOMPLETE = {
   name: 'Fake Place from Autocomplete',
 };
 
-const FAKE_PLACE_FROM_QUERY = makeFakePlace({id: 'FAKE_QUERY_PLACE_ID'});
+const FAKE_PLACE_FROM_QUERY = makeFakePlace({
+  id: 'FAKE_QUERY_PLACE_ID',
+  formattedAddress: '123 Main St, City Name, CA 00000',
+  displayName: '123 Main St'
+});
 
 describe('PlacePicker', () => {
   const env = new Environment();
@@ -276,8 +280,6 @@ describe('PlacePicker', () => {
   });
 
   it(`sets value based on place returned by Find Place request`, async () => {
-    (env.fakeGoogleMapsHarness!.findPlaceFromQueryHandler as jasmine.Spy)
-        .and.returnValue({places: [FAKE_PLACE_FROM_QUERY]});
     fakeAutocomplete.getBounds.and.returnValue(FAKE_BOUNDS);
     const {picker, input, searchButton, clearButton} = await prepareState();
 
@@ -301,6 +303,7 @@ describe('PlacePicker', () => {
     expect(place!.id).toBe('FAKE_QUERY_PLACE_ID');
     expect(searchButton.disabled).toBeTrue();
     expect(clearButton.hidden).toBeFalse();
+    expect(input.value).toBe('123 Main St, City Name, CA 00000');
   });
 
   it('sets value from fallback GA API when Place.findPlaceFromQuery is not available',
@@ -311,8 +314,14 @@ describe('PlacePicker', () => {
            .and.throwError(new Error(
                'google.maps.places.Place.findPlaceFromQuery() is not available in the SDK!'));
        spyOn(env.fakeGoogleMapsHarness!, 'findPlaceFromQueryGAHandler')
-           .and.returnValue(
-               {results: [{place_id: 'ga123'} as PlaceResult], status: 'OK'});
+           .and.returnValue({
+             results: [{
+               place_id: 'ga123',
+               name: 'City Hall',
+               formatted_address: '123 Main St, City Name, CA 00000'
+             } as PlaceResult],
+             status: 'OK'
+           });
 
        await enterQueryText(input, '123 Main St');
        searchButton.click();
@@ -330,6 +339,7 @@ describe('PlacePicker', () => {
        expect(place!.id).toBe('ga123');
        expect(searchButton.disabled).toBeTrue();
        expect(clearButton.hidden).toBeFalse();
+       expect(input.value).toBe('City Hall, 123 Main St, City Name, CA 00000');
      });
 
   it(`sets value to null if no search results and fires event`, async () => {