move current location button inside input and allow immediate focus of first input

Author: karussell

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;
 }

src/sidebar/search/AddressInput.tsx

@@ -5,21 +5,20 @@ 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'
 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) {
                 <PlainButton
                     style={text.length == 0 ? { display: 'none' } : {}}
                     className={styles.btnInputClear}
-                    onClick={() => {
+                    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) {
                     <Cross />
                 </PlainButton>
 
+                <PlainButton
+                    style={text.length == 0 && hasFocus ? {} : { display: 'none' }}
+                    className={styles.btnCurrentLocation}
+                    onMouseDown={(e) => {
+                        // here it is desired to close mobile-input view when clicked
+                        onCurrentLocationSelected(props.onAddressSelected)
+                    }}
+                >
+                    <CurrentLocationIcon />
+                </PlainButton>
+
                 {autocompleteItems.length > 0 && (
                     <ResponsiveAutocomplete
                         inputRef={searchInputContainer.current!}
@@ -257,9 +265,6 @@ export default function AddressInput(props: AddressInputProps) {
                                 if (item instanceof GeocodingItem) {
                                     hideSuggestions()
                                     props.onAddressSelected(item.toText(), item.point)
-                                } else if (item instanceof SelectCurrentLocationItem) {
-                                    hideSuggestions()
-                                    onCurrentLocationSelected(props.onAddressSelected)
                                 } else if (item instanceof POIQueryItem) {
                                     hideSuggestions()
                                     handlePoiSearch(poiSearch, item.result, props.map)

src/sidebar/search/AddressInputAutocomplete.module.css

@@ -30,23 +30,6 @@
     background-color: #c6c6c6;
 }
 
-.currentLocationEntry {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0.5rem 0.5rem;
-}
-
-.currentLocationIcon {
-    width: 1.2rem;
-}
-
-.currentLocationIcon > svg {
-    height: 100%;
-    width: 100%;
-}
-
 .poiEntry {
     padding: 0.5em 0;
     display: flex;

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 <GeocodingEntry item={item} isHighlighted={isHighlighted} onSelect={onSelect} />
-    else if (item instanceof SelectCurrentLocationItem)
-        return <SelectCurrentLocation item={item} isHighlighted={isHighlighted} onSelect={onSelect} />
     else if (item instanceof POIQueryItem)
         return <POIQueryEntry item={item} isHighlighted={isHighlighted} onSelect={onSelect} />
     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 (
-        <AutocompleteEntry isHighlighted={isHighlighted} onSelect={() => onSelect(item)}>
-            <div className={styles.currentLocationEntry}>
-                <div className={styles.currentLocationIcon}>
-                    <CurrentLocationIcon />
-                </div>
-                <span className={styles.mainText}>{tr('current_location')}</span>
-            </div>
-        </AutocompleteEntry>
-    )
-}
-
 function GeocodingEntry({
     item,
     isHighlighted,

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<HTMLDivElement>(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) && (
                 <div
-                    ref={myMarkerRef}
-                    tabIndex={-1}
                     title={tr('drag_to_reorder')}
                     className={styles.markerContainer}
                     draggable