From 55333902dea8f15325fe3048fd38f705038f7a5f Mon Sep 17 00:00:00 2001 From: awmack Date: Wed, 6 Sep 2023 15:50:30 -0700 Subject: [PATCH] fix: have Place Picker update input when performing fallback search PiperOrigin-RevId: 563238912 --- src/place_picker/place_picker.ts | 22 ++++++++++++++++++---- src/place_picker/place_picker_test.ts | 20 +++++++++++++++----- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/place_picker/place_picker.ts b/src/place_picker/place_picker.ts index 0649989..b64a9ae 100644 --- 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 index c4fd3c4..286fb04 100644 --- 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 () => {