From c7c3f07acfebe940de5ac0dc9eb23f09e58d5dd8 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 30 Jan 2024 21:25:37 +0100
Subject: [PATCH] fix some firefox mobile issue

---
 .../Subcomponents/Controls/SearchControl.tsx   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index ea173ecf..b454b59f 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -18,6 +18,8 @@ import MarkerIconFactory from '../../../../Utils/MarkerIconFactory';
 
 export const SearchControl = ({ clusterRef }) => {
 
+    const windowDimensions = useWindowDimensions();
+    const [popupOpen, setPopupOpen] = useState(false);
 
     const [value, setValue] = useState('');
     const [geoResults, setGeoResults] = useState<Array<any>>([]);
@@ -33,6 +35,14 @@ export const SearchControl = ({ clusterRef }) => {
     const resetFilterTags = useResetFilterTags();
     const filterTags = useFilterTags();
 
+    useMapEvents({
+        popupopen: () => {            
+            setPopupOpen(true);
+        },
+        popupclose: () => {
+            setPopupOpen(false);
+        }
+    })
 
     useDebounce(() => {
         const searchGeo = async () => {
@@ -64,12 +74,16 @@ export const SearchControl = ({ clusterRef }) => {
     const searchInput = useRef<HTMLInputElement>(null);
 
     return (<>
+        {!(windowDimensions.height < 500 && popupOpen && hideSuggestions)   &&
             <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
                 <div className='flex tw-flex-row'>
                     <input type="text" placeholder="search ..." autoComplete="off" value={value} className="tw-input tw-input-bordered tw-w-full tw-shadow-xl tw-rounded-lg tw-mr-2"
                         ref={searchInput}
                         onChange={(e) => setValue(e.target.value)}
-                        onFocus={() => setHideSuggestions(false)}
+                        onFocus={() => {
+                            setHideSuggestions(false);
+                            if(windowDimensions.width < 500) map.closePopup();
+                        }}
                         onBlur={() => hide()} />
                     <LocateControl />
                 </div>
@@ -152,7 +166,7 @@ export const SearchControl = ({ clusterRef }) => {
                         }
                     </div>}
             </div>
-        
+        }
     </>
 
     )