ERA-10349: Support EFB schemas in ER > Location Field [2]

src/LocationPicker/MenuPopover/index.js

@@ -33,6 +33,7 @@ const MenuPopover = ({
 }, ref) => {
   const { t } = useTranslation('components', { keyPrefix: 'locationPicker.menuPopover' });
 
+  const isPickingLocation = useSelector((state) => state.view.mapLocationSelection.isPickingLocation);
   const showUserLocation = useSelector((state) => state.view.showUserLocation);
 
   const gpsFormatToggleRef = useRef();
@@ -105,34 +106,38 @@ const MenuPopover = ({
   }, []);
 
   useEffect(() => {
-    const onMouseDown = (event) => {
-      if (!wrapperRef.current.contains(event.target) && !setLocationButtonRef.current.contains(event.target)) {
-        onClose(event);
-
-        if (!target.current.contains(event.target)) {
-          // Clicking away from our picker when the menu is open doesn't trigger the wrapper's blur event, so we need
-          // to trigger the onBlur callback manually.
-          const blurEvent = new FocusEvent('blur', {
-            bubbles: true,
-            cancelable: false,
-            relatedTarget: event.target,
-          });
-
-          Object.defineProperties(blurEvent, {
-            target: {
-              value: target.current,
-            },
-          });
-
-          onBlur(blurEvent);
+    // Add a mouse down event to close the menu if the user clicks outside only if the user is not picking a location
+    // from the map.
+    if (!isPickingLocation) {
+      const onMouseDown = (event) => {
+        if (!wrapperRef.current.contains(event.target) && !setLocationButtonRef.current.contains(event.target)) {
+          onClose(event);
+
+          if (onBlur && !target.current.contains(event.target)) {
+            // Clicking away from our picker when the menu is open doesn't trigger the wrapper's blur event, so we need
+            // to trigger the onBlur callback manually.
+            const blurEvent = new FocusEvent('blur', {
+              bubbles: true,
+              cancelable: false,
+              relatedTarget: event.target,
+            });
+
+            Object.defineProperties(blurEvent, {
+              target: {
+                value: target.current,
+              },
+            });
+
+            onBlur(blurEvent);
+          }
         }
-      }
-    };
+      };
 
-    document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mousedown', onMouseDown);
 
-    return () => document.removeEventListener('mousedown', onMouseDown);
-  }, [onBlur, onClose, setLocationButtonRef, target]);
+      return () => document.removeEventListener('mousedown', onMouseDown);
+    }
+  }, [isPickingLocation, onBlur, onClose, setLocationButtonRef, target]);
 
   return <Popover
       className={`${className} ${styles.menuPopover}`}

src/LocationPicker/MenuPopover/index.test.js

@@ -32,6 +32,9 @@ describe('LocationPicker - MenuPopover', () => {
   beforeEach(() => {
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {
@@ -247,4 +250,43 @@ describe('LocationPicker - MenuPopover', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(onBlur).not.toHaveBeenCalled();
   });
+
+  test('does not close the menu if the user clicks outside while picking a location', () => {
+    store.view.mapLocationSelection.isPickingLocation = true;
+
+    render(<>
+      <div data-testid="outside" />
+
+      <Provider store={mockStore(store)}>
+        <MapContext.Provider value={map}>
+          <MenuPopover
+            className="className"
+            id="locationPicker"
+            onBlur={onBlur}
+            onChange={onChange}
+            onClose={onClose}
+            setLocationButtonRef={{
+              current: {
+                contains: () => false,
+                focus: setLocationButtonRefFocus,
+              },
+            }}
+            style={{}}
+            target={{
+              current: {
+                contains: () => false,
+                offsetWidth: 100,
+              },
+            }}
+            value={null}
+          />
+        </MapContext.Provider>
+      </Provider>
+    </>);
+
+    userEvent.click(screen.getByTestId('outside'));
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+  });
 });

src/LocationPicker/index.test.js

@@ -21,6 +21,9 @@ describe('LocationPicker', () => {
 
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {

src/MapDrawingTools/index.test.js

@@ -100,8 +100,6 @@ describe('MapDrawingTools', () => {
     });
 
     test('adding a layer if the source exists', () => {
-      map.getSource.mockReturnValue({ whatever: 'yes' });
-
       render(
         <MapContext.Provider value={map}>
           <MapDrawingToolsContextProvider>

src/ReportManager/DetailsSection/SchemaForm/fields/Location/index.test.js

@@ -26,6 +26,9 @@ describe('ReportManager - DetailsSection - SchemaForm - fields - Location', () =
 
     store = {
       view: {
+        mapLocationSelection: {
+          isPickingLocation: false,
+        },
         showUserLocation: false,
         userLocation: null,
         userPreferences: {

src/ReportManager/DetailsSection/SchemaForm/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { FORM_ELEMENT_TYPES, ROOT_CANVAS_ID } from './constants';
 import makeFieldsFromSchema from './utils/makeFieldsFromSchema';
-import useLocationMarkersLayer from './utils/useLocationMarkersLayer';
+import useMapLocationMarkers from './utils/useMapLocationMarkers';
 import useSchemaValidations from './utils/useSchemaValidations';
 
 import Collection from './fields/Collection';
@@ -23,7 +23,9 @@ export const FIELDS = {
 
 const SchemaForm = ({
   autofillDefaultInputs,
+  eventId,
   eventLocation,
+  hideMapLocationMarkers,
   initialFormData,
   onFormDataChange,
   onFormSubmit,
@@ -48,8 +50,8 @@ const SchemaForm = ({
   const {
     blurLocationMarker,
     focusLocationMarker,
-    updateLocationMarkers
-  } = useLocationMarkersLayer(eventLocation, onLocationMarkerClick);
+    setLocationMarkers,
+  } = useMapLocationMarkers(eventId, eventLocation, onLocationMarkerClick, hideMapLocationMarkers);
 
   // This ref works as a flag to trigger a useEffect and call onFormDataChange asynchronously when there are changes in
   // the form data, so we can keep the onSectionFieldChange dependency array empty.
@@ -160,8 +162,8 @@ const SchemaForm = ({
     };
     addLocationMarkersFromFormDataRecursively(formData);
 
-    updateLocationMarkers(locationMarkers);
-  }, [fields, formData, updateLocationMarkers]);
+    setLocationMarkers(locationMarkers);
+  }, [fields, formData, setLocationMarkers]);
 
   return <form onSubmit={onSubmit}>
     {fields[ROOT_CANVAS_ID]?.details.fields.map((sectionId) => <Section