From d55a8d9559e870f567dd41b5723ff0228be1499b Mon Sep 17 00:00:00 2001 From: Johann Levesque Date: Fri, 25 Oct 2024 15:47:36 -0400 Subject: [PATCH] =?UTF-8?q?fix(appbar):=20Fix=20the=20geolocator=20languag?= =?UTF-8?q?e=20and=20map=20interactoin=20wwhen=20ap=E2=80=A6=20(#2566)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(appbar): Fix the geolocator language and map interactoin wwhen app bar panel open Closes #2561, #2545 * fix comment --- .../core/components/geolocator/geolocator.tsx | 81 +++++++++++-------- .../ui-state.ts | 8 +- 2 files changed, 53 insertions(+), 36 deletions(-) diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator.tsx index 5933925bf23..0ecd114b7a5 100644 --- a/packages/geoview-core/src/core/components/geolocator/geolocator.tsx +++ b/packages/geoview-core/src/core/components/geolocator/geolocator.tsx @@ -5,7 +5,7 @@ import { useTheme } from '@mui/material'; import { CloseIcon, SearchIcon, AppBarUI, Box, Divider, IconButton, ProgressBar, Toolbar } from '@/ui'; import { StyledInputField, sxClasses } from './geolocator-style'; import { OL_ZOOM_DURATION } from '@/core/utils/constant'; -import { useActiveAppBarTab, useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state'; +import { useActiveAppBarTab, useUIActiveTrapGeoView, useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state'; import { useAppGeolocatorServiceURL, useAppDisplayLanguage } from '@/core/stores/store-interface-and-intial-values/app-state'; import { GeolocatorResult } from './geolocator-result'; import { logger } from '@/core/utils/logger'; @@ -43,10 +43,10 @@ export function Geolocator(): JSX.Element { const displayLanguage = useAppDisplayLanguage(); const geolocatorServiceURL = useAppGeolocatorServiceURL(); const { setActiveAppBarTab } = useUIStoreActions(); - const { tabGroup, isOpen } = useActiveAppBarTab(); + const activeTrapGeoView = useUIActiveTrapGeoView(); - const urlRef = useRef(`${geolocatorServiceURL}&lang=${displayLanguage}`); + const displayLanguageRef = useRef(displayLanguage); const geolocatorRef = useRef(); const abortControllerRef = useRef(null); const fetchTimerRef = useRef(); @@ -92,41 +92,47 @@ export function Geolocator(): JSX.Element { * @param {string} searchTerm the search term entered by the user * @returns {Promise} */ - const getGeolocations = async (searchTerm: string): Promise => { - try { - setIsLoading(true); - // Abort any pending requests - if (abortControllerRef.current) { - abortControllerRef.current.abort(); - clearTimeout(fetchTimerRef.current); - } + const getGeolocations = useCallback( + async (searchTerm: string): Promise => { + try { + setIsLoading(true); + // Abort any pending requests + if (abortControllerRef.current) { + abortControllerRef.current.abort(); + clearTimeout(fetchTimerRef.current); + } - // Create new abort controller - const newAbortController = new AbortController(); - abortControllerRef.current = newAbortController; + // Create new abort controller + const newAbortController = new AbortController(); + abortControllerRef.current = newAbortController; - const response = await fetch(`${urlRef.current}&q=${encodeURIComponent(`${searchTerm}*`)}`, { - signal: abortControllerRef.current.signal, - }); - if (!response.ok) { - throw new Error('Error'); - } - const result = (await response.json()) as GeoListItem[]; - const ddSupport = getDecimalDegreeItem(searchTerm); + // Use the current value from the ref + const currentUrl = `${geolocatorServiceURL}&lang=${displayLanguageRef.current}`; - if (ddSupport) { - // insert at the top of array. - result.unshift(ddSupport); - } + const response = await fetch(`${currentUrl}&q=${encodeURIComponent(`${searchTerm}*`)}`, { + signal: abortControllerRef.current.signal, + }); + if (!response.ok) { + throw new Error('Error'); + } + const result = (await response.json()) as GeoListItem[]; + const ddSupport = getDecimalDegreeItem(searchTerm); - setData(result); - setError(null); - setIsLoading(false); - clearTimeout(fetchTimerRef?.current); - } catch (err) { - setError(err as Error); - } - }; + if (ddSupport) { + // insert at the top of array. + result.unshift(ddSupport); + } + + setData(result); + setError(null); + setIsLoading(false); + clearTimeout(fetchTimerRef?.current); + } catch (err) { + setError(err as Error); + } + }, + [geolocatorServiceURL] + ); /** * Reset loading and data state and clear fetch timer. @@ -249,8 +255,13 @@ export function Geolocator(): JSX.Element { }; }, [isLoading]); + // Update the ref whenever displayLanguage changes + useEffect(() => { + displayLanguageRef.current = displayLanguage; + }, [displayLanguage]); + return ( - + { + // Gv Side effect with focus trap and side panel app bar open + // We need to check if the viewer is in keyboard navigation mode. If not, we do nt apply the focus trap. + // Focus trap has side effect when a app bar panel is open. It does not let user use their mouse + // to pan the map. Even scroll is difficult, user needs to click outside the brower then come back for + // the mouse wheel to work + const isFocusTrappedAndKeyboardNavigation = get().uiState.activeTrapGeoView ? isFocusTrapped : false; set({ uiState: { ...get().uiState, @@ -233,7 +239,7 @@ export function initializeUIState(set: TypeSetStore, get: TypeGetStore): IUIStat tabId, tabGroup, isOpen, - isFocusTrapped, + isFocusTrapped: isFocusTrappedAndKeyboardNavigation, }, }, });