diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css index a9dc9e87..4703f0dc 100644 --- a/src/sidebar/search/AddressInput.module.css +++ b/src/sidebar/search/AddressInput.module.css @@ -6,6 +6,8 @@ } .btnCurrentLocation { + opacity: 1; + transition: opacity 2s ease-in-out; padding: 0 7px 0 5px; color: grey; width: 32px; diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index e3cf1d09..0eff6cc9 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -174,6 +174,9 @@ export default function AddressInput(props: AddressInputProps) { const lonlat = toLonLat(getMap().getView().getCenter()!) const biasCoord = { lng: lonlat[0], lat: lonlat[1] } + // do not focus on mobile as we would hide the map with the "input"-view + const focusFirstInput = props.index == 0 && !isSmallScreen + return (
{ @@ -219,7 +222,7 @@ export default function AddressInput(props: AddressInputProps) { }} onBlur={() => { setHasFocus(false) - if (!isSmallScreen) hideSuggestions() // see #398 + hideSuggestions() }} value={text} placeholder={tr( @@ -230,11 +233,11 @@ export default function AddressInput(props: AddressInputProps) { { e.preventDefault() // do not lose focus and close mobile-input view when clicked setText('') props.onChange('') - searchInput.current!.focus() }} > @@ -243,6 +246,7 @@ export default function AddressInput(props: AddressInputProps) { { // here it is desired to close mobile-input view when clicked onCurrentLocationSelected(props.onAddressSelected)