antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix some firefox mobile issue

Browse Source
This commit is contained in:
Anton Tranelis 2024-01-30 21:25:37 +01:00
parent a9f42e2ef6
commit c7c3f07acf
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -18,6 +18,8 @@ import MarkerIconFactory from '../../../../Utils/MarkerIconFactory';
export const SearchControl = ({ clusterRef }) => { export const SearchControl = ({ clusterRef }) => {
const windowDimensions = useWindowDimensions();
const [popupOpen, setPopupOpen] = useState(false);
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [geoResults, setGeoResults] = useState<Array<any>>([]); const [geoResults, setGeoResults] = useState<Array<any>>([]);
@ -33,6 +35,14 @@ export const SearchControl = ({ clusterRef }) => {
const resetFilterTags = useResetFilterTags(); const resetFilterTags = useResetFilterTags();
const filterTags = useFilterTags(); const filterTags = useFilterTags();
useMapEvents({
popupopen: () => {
setPopupOpen(true);
},
popupclose: () => {
setPopupOpen(false);
}
})
useDebounce(() => { useDebounce(() => {
const searchGeo = async () => { const searchGeo = async () => {
@ -64,12 +74,16 @@ export const SearchControl = ({ clusterRef }) => {
const searchInput = useRef<HTMLInputElement>(null); const searchInput = useRef<HTMLInputElement>(null);
return (<> return (<>
{!(windowDimensions.height < 500 && popupOpen && hideSuggestions) &&
<div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '> <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
<div className='flex tw-flex-row'> <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" <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} ref={searchInput}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
onFocus={() => setHideSuggestions(false)} onFocus={() => {
setHideSuggestions(false);
if(windowDimensions.width < 500) map.closePopup();
}}
onBlur={() => hide()} /> onBlur={() => hide()} />
<LocateControl /> <LocateControl />
</div> </div>
@ -152,7 +166,7 @@ export const SearchControl = ({ clusterRef }) => {
} }
</div>} </div>}
</div> </div>
}
</> </>
) )