diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
index 297eed18..a9dc9e87 100644
--- a/src/sidebar/search/AddressInput.module.css
+++ b/src/sidebar/search/AddressInput.module.css
@@ -5,6 +5,17 @@
scale: 0.7;
}
+.btnCurrentLocation {
+ padding: 0 7px 0 5px;
+ color: grey;
+ width: 32px;
+}
+
+.btnCurrentLocation > svg {
+ height: 100%;
+ width: 100%;
+}
+
.btnClose {
display: none;
}
diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx
index 12711c11..e3cf1d09 100644
--- a/src/sidebar/search/AddressInput.tsx
+++ b/src/sidebar/search/AddressInput.tsx
@@ -5,13 +5,13 @@ import Autocomplete, {
AutocompleteItem,
GeocodingItem,
POIQueryItem,
- SelectCurrentLocationItem,
} from '@/sidebar/search/AddressInputAutocomplete'
import ArrowBack from './arrow_back.svg'
import Cross from '@/sidebar/times-solid-thin.svg'
+import CurrentLocationIcon from './current-location.svg'
import styles from './AddressInput.module.css'
-import Api, { ApiImpl, getApi } from '@/api/Api'
+import Api, { getApi } from '@/api/Api'
import { tr } from '@/translation/Translation'
import { coordinateToText, hitToItem, nominatimHitToItem, textToCoordinate } from '@/Converters'
import { useMediaQuery } from 'react-responsive'
@@ -19,7 +19,6 @@ import PopUp from '@/sidebar/search/PopUp'
import PlainButton from '@/PlainButton'
import { onCurrentLocationSelected } from '@/map/MapComponent'
import { toLonLat, transformExtent } from 'ol/proj'
-import { calcDist } from '@/distUtils'
import { Map } from 'ol'
import { AddressParseResult } from '@/pois/AddressParseResult'
import { getMap } from '@/map/map'
@@ -79,11 +78,6 @@ export default function AddressInput(props: AddressInputProps) {
// if item is selected we need to clear the autocompletion list
useEffect(() => setAutocompleteItems([]), [props.point])
- // if no items but input is selected show current location item
- useEffect(() => {
- if (hasFocus && text.length == 0 && autocompleteItems.length === 0)
- setAutocompleteItems([new SelectCurrentLocationItem()])
- }, [autocompleteItems, hasFocus])
function hideSuggestions() {
geocoder.cancel()
@@ -207,6 +201,7 @@ export default function AddressInput(props: AddressInputProps) {
style={props.moveStartIndex == props.index ? { borderWidth: '2px', margin: '-1px' } : {}}
className={styles.input}
type="text"
+ autoFocus={props.index == 0}
ref={searchInput}
autoComplete="off"
onChange={e => {
@@ -223,6 +218,7 @@ export default function AddressInput(props: AddressInputProps) {
if (origAutocompleteItems.length > 0) setAutocompleteItems(origAutocompleteItems)
}}
onBlur={() => {
+ setHasFocus(false)
if (!isSmallScreen) hideSuggestions() // see #398
}}
value={text}
@@ -234,7 +230,8 @@ export default function AddressInput(props: AddressInputProps) {
{
+ onMouseDown={(e) => {
+ e.preventDefault() // do not lose focus and close mobile-input view when clicked
setText('')
props.onChange('')
searchInput.current!.focus()
@@ -243,6 +240,17 @@ export default function AddressInput(props: AddressInputProps) {
+ {
+ // here it is desired to close mobile-input view when clicked
+ onCurrentLocationSelected(props.onAddressSelected)
+ }}
+ >
+
+
+
{autocompleteItems.length > 0 && (
svg {
- height: 100%;
- width: 100%;
-}
-
.poiEntry {
padding: 0.5em 0;
display: flex;
diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx
index 7f0e0329..5516e309 100644
--- a/src/sidebar/search/AddressInputAutocomplete.tsx
+++ b/src/sidebar/search/AddressInputAutocomplete.tsx
@@ -1,6 +1,4 @@
import styles from './AddressInputAutocomplete.module.css'
-import CurrentLocationIcon from './current-location.svg'
-import { tr } from '@/translation/Translation'
import { Bbox } from '@/api/graphhopper'
import { AddressParseResult } from '@/pois/AddressParseResult'
@@ -24,8 +22,6 @@ export class GeocodingItem implements AutocompleteItem {
}
}
-export class SelectCurrentLocationItem implements AutocompleteItem {}
-
export class POIQueryItem implements AutocompleteItem {
result: AddressParseResult
@@ -55,8 +51,6 @@ export default function Autocomplete({ items, highlightedItem, onSelect }: Autoc
function mapToComponent(item: AutocompleteItem, isHighlighted: boolean, onSelect: (hit: AutocompleteItem) => void) {
if (item instanceof GeocodingItem)
return
- else if (item instanceof SelectCurrentLocationItem)
- return
else if (item instanceof POIQueryItem)
return
else throw Error('Unsupported item type: ' + typeof item)
@@ -82,27 +76,6 @@ export function POIQueryEntry({
)
}
-export function SelectCurrentLocation({
- item,
- isHighlighted,
- onSelect,
-}: {
- item: SelectCurrentLocationItem
- isHighlighted: boolean
- onSelect: (item: SelectCurrentLocationItem) => void
-}) {
- return (
- onSelect(item)}>
-
-
-
-
-
{tr('current_location')}
-
-
- )
-}
-
function GeocodingEntry({
item,
isHighlighted,
diff --git a/src/sidebar/search/Search.tsx b/src/sidebar/search/Search.tsx
index d2d8bf8a..9b3b7037 100644
--- a/src/sidebar/search/Search.tsx
+++ b/src/sidebar/search/Search.tsx
@@ -92,13 +92,6 @@ const SearchBox = ({
}) => {
const point = points[index]
- // With this ref and tabIndex=-1 we ensure that the first 'TAB' gives the focus the first input but the marker won't be included in the TAB sequence, #194
- const myMarkerRef = useRef(null)
-
- useEffect(() => {
- if (index == 0) myMarkerRef.current?.focus()
- }, [])
-
function onClickOrDrop() {
onDropPreviewSelect(-1)
const newIndex = moveStartIndex < index ? index + 1 : index
@@ -113,8 +106,6 @@ const SearchBox = ({
<>
{(moveStartIndex < 0 || moveStartIndex == index) && (