Merge a9f34ba into ee6a79f

src/components/LocationSelector/LocationSelector.tsx

@@ -6,6 +6,7 @@ import { FieldWrapper } from '../FieldWrapper';
 import { LocationSelectorDialogWithGoogleLoader } from './LocationSelectorDialogWithGoogleLoader';
 import { Location, findCenter, getRadiusInMeters, getAddressComponents } from './utils';
 import { TAB_KEY, ESCAPE_KEY } from '../../constants';
+import { useBrowserTabVisibilityChange } from '../../hooks';
 import styles from './LocationSelector.scss';
 
 const { block, elem } = bem('LocationSelector', styles);
@@ -129,20 +130,21 @@ export const LocationSelector: React.FC<Props> = (props) => {
 
     const [isOpen, setIsOpen] = React.useState(false);
     const [isWrapperFocused, setIsWrapperFocused] = React.useState(false);
+    const isBrowserTabVisible = useBrowserTabVisibilityChange();
     const buttonRef = React.useRef<HTMLButtonElement>();
 
     const hasLocationsSelected = selectedLocations && selectedLocations.length > 0;
 
     function handleOpenModal() {
-        if (!isOpen && !isWrapperFocused) {
+        if (!isOpen && !isWrapperFocused && isBrowserTabVisible) {
             buttonRef.current?.focus();
             setIsOpen(true);
         }
         setIsWrapperFocused(true);
     }
 
     function handleCloseModal() {
-        if (isOpen) {
+        if (isOpen && isBrowserTabVisible) {
             setIsOpen(false);
             onBlur();
         }

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useDebounce } from './useDebounce';
 export { usePrevious } from './usePrevious';
+export { useBrowserTabVisibilityChange } from './useBrowserTabVisibilityChange';

src/hooks/useBrowserTabVisibilityChange.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export function useBrowserTabVisibilityChange() {
+    const [isBrowserTabVisible, setIsBrowserTabVisible] = React.useState(true);
+    const handleFocusHandleVisibilityChange = () => {
+        if (document.hidden) {
+            setIsBrowserTabVisible(false);
+        } else {
+            setTimeout(() => setIsBrowserTabVisible(true), 250);
+        }
+    };
+
+    React.useEffect(() => {
+        document.addEventListener('visibilitychange', handleFocusHandleVisibilityChange);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleFocusHandleVisibilityChange);
+        };
+    });
+
+    return isBrowserTabVisible;
+}