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) && (