diff --git a/src/__tests__/components/fields/location-field/location-field.spec.tsx b/src/__tests__/components/fields/location-field/location-field.spec.tsx index a3bd21eff..cc60cb768 100644 --- a/src/__tests__/components/fields/location-field/location-field.spec.tsx +++ b/src/__tests__/components/fields/location-field/location-field.spec.tsx @@ -52,6 +52,7 @@ enum ELocationInputEvents { "SET_CURRENT_LOCATION" = "set-current-location", "GET_CURRENT_LOCATION" = "get-current-location", "MOUNT" = "mount", + "SHOW_LOCATION_MODAL_READY" = "show-location-modal-ready", "SHOW_MODAL" = "show-location-modal", "HIDE_MODAL" = "hide-location-modal", "CLICK_EDIT_BUTTON" = "click-edit-button", @@ -635,6 +636,23 @@ describe("location-input-group", () => { // PostalCodeError //Modal Events + describe("Show Location Modal Ready events", () => { + it("should fire show-location-modal-ready after it is registered", async () => { + const handleShowLocationModalReady = jest.fn(); + renderComponent({ + eventType: ELocationInputEvents.SHOW_LOCATION_MODAL_READY, + eventListener: (formRef) => () => { + handleShowLocationModalReady(); + formRef.dispatchFieldEvent(UI_TYPE, ELocationInputEvents.SHOW_MODAL, COMPONENT_ID); + }, + }); + await waitFor(() => { + expect(handleShowLocationModalReady).toHaveBeenCalled(); + expect(getLocationModal(true)).toBeInTheDocument(); + }); + }); + }); + describe("Modal events", () => { it("should fire show-location-modal event on showing location modal", async () => { const handleShowReviewModal = jest.fn(); diff --git a/src/components/fields/location-field/location-field.tsx b/src/components/fields/location-field/location-field.tsx index 719d8d9fa..9892853ca 100644 --- a/src/components/fields/location-field/location-field.tsx +++ b/src/components/fields/location-field/location-field.tsx @@ -59,6 +59,9 @@ export const LocationField = (props: IGenericFieldProps) = useEffect(() => { addFieldEventListener("show-location-modal", id, handleLocationModalShow); + // Signal that the field has registered its listeners and is ready for external triggers. + dispatchFieldEvent("show-location-modal-ready", id); + return () => { removeFieldEventListener("show-location-modal", id, handleLocationModalShow); }; diff --git a/src/components/fields/location-field/location-modal/location-search/location-search.tsx b/src/components/fields/location-field/location-modal/location-search/location-search.tsx index 9cc4b1ad8..8fc16cf00 100644 --- a/src/components/fields/location-field/location-modal/location-search/location-search.tsx +++ b/src/components/fields/location-field/location-modal/location-search/location-search.tsx @@ -143,7 +143,7 @@ export const LocationSearch = ({ latitude: 1.29994179707526, longitude: 103.789404349716, bufferRadius: 1, - abortSignal: reverseGeocodeAborter.current.signal, + abortSignal: reverseGeocodeAborter.current?.signal, otherFeatures: OneMapBoolean.YES, getToken, headers: mapApiHeaders, diff --git a/src/components/fields/location-field/types.ts b/src/components/fields/location-field/types.ts index cc2dd2844..246ab0efc 100644 --- a/src/components/fields/location-field/types.ts +++ b/src/components/fields/location-field/types.ts @@ -96,6 +96,7 @@ export type TSetCurrentLocationDetail = TLocationFieldDetail; export type TLocationFieldErrorDetail = TLocationFieldDetail; export type TLocationFieldEvents = { + "show-location-modal-ready": CustomEvent; "get-current-location": CustomEvent; "set-current-location": CustomEvent; error: CustomEvent; @@ -116,6 +117,14 @@ export class GeolocationPositionErrorWrapper extends Error { // ============================================================================= // EVENTS (fired from FEE) // ============================================================================= +/** fired after the location field registers the `show-location-modal` event listener and is ready for external triggers */ +function locationFieldEvent( + uiType: "location-field", + type: "show-location-modal-ready", + id: string, + listener: TFieldEventListener, + options?: boolean | AddEventListenerOptions | undefined +): void; /** fired on showing location modal */ function locationFieldEvent( uiType: "location-field", diff --git a/src/stories/3-fields/location-field/location-field-events.stories.tsx b/src/stories/3-fields/location-field/location-field-events.stories.tsx index 75e7a64a8..d137e51fc 100644 --- a/src/stories/3-fields/location-field/location-field-events.stories.tsx +++ b/src/stories/3-fields/location-field/location-field-events.stories.tsx @@ -850,3 +850,10 @@ RefreshLocationAndTriggerGetCurrentLocation.args = { label: "Refresh current location and trigger get current location", mapApi: defaultMapApi, }; + +export const ShowLocationModalReady = Template("show-location-modal-ready").bind({}); +ShowLocationModalReady.args = { + uiType: "location-field", + label: "Show Location Modal Ready", + mapApi: defaultMapApi, +};