From 8aa4dee285280512b94dd190faad644f7de8cca2 Mon Sep 17 00:00:00 2001 From: Peter Date: Sat, 30 Nov 2024 17:55:28 +0100 Subject: [PATCH 01/13] move current location button inside input and allow immediate focus of first input --- src/sidebar/search/AddressInput.module.css | 11 +++++++ src/sidebar/search/AddressInput.tsx | 29 +++++++++++-------- .../AddressInputAutocomplete.module.css | 17 ----------- .../search/AddressInputAutocomplete.tsx | 27 ----------------- src/sidebar/search/Search.tsx | 9 ------ 5 files changed, 28 insertions(+), 65 deletions(-) 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) && (
Date: Fri, 6 Dec 2024 00:36:02 +0100 Subject: [PATCH 02/13] fixes for mobile view when clicking on back or clearText buttons or not on an autosuggest item --- src/sidebar/search/AddressInput.module.css | 2 ++ src/sidebar/search/AddressInput.tsx | 10 +++++++--- 2 files changed, 9 insertions(+), 3 deletions(-) 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) From f1da7245af837f99cd85c155ad84a7c611a118b0 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 00:41:53 +0100 Subject: [PATCH 03/13] minor comment --- src/sidebar/search/AddressInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 0eff6cc9..27086433 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -248,7 +248,7 @@ export default function AddressInput(props: AddressInputProps) { className={styles.btnCurrentLocation} // no onClick because otherwise focus would be lost before button receives click onMouseDown={(e) => { - // here it is desired to close mobile-input view when clicked + // here it is desired to close mobile-input view when clicked -> no "e.preventDefault()" onCurrentLocationSelected(props.onAddressSelected) }} > From 7f7844a7a13871a64f8845024dff582ceba6b78a Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 01:15:55 +0100 Subject: [PATCH 04/13] use onMouseDown for preventDefault but not for the action as this feels unnatural; fix bug when 'ESC' is pressed --- src/sidebar/search/AddressInput.tsx | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 27086433..2c7f5e2e 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -100,10 +100,8 @@ export default function AddressInput(props: AddressInputProps) { (event: React.KeyboardEvent) => { const inputElement = event.target as HTMLInputElement if (event.key === 'Escape') { - // onBlur is deactivated for mobile so force: - setHasFocus(false) setText(origText) - hideSuggestions() + searchInput.current!.blur() return } @@ -157,9 +155,6 @@ export default function AddressInput(props: AddressInputProps) { props.onAddressSelected(item.toText(), item.point) } } - // onBlur is deactivated for mobile so force: - setHasFocus(false) - hideSuggestions() break } }, @@ -193,10 +188,7 @@ export default function AddressInput(props: AddressInputProps) { > { - setHasFocus(false) - hideSuggestions() - }} + onClick={() => searchInput.current!.blur()} > @@ -233,9 +225,10 @@ export default function AddressInput(props: AddressInputProps) { { - e.preventDefault() // do not lose focus and close mobile-input view when clicked + onMouseDown={(e) => + e.preventDefault() // prevents that input->onBlur is called when clicking the button + } + onClick={(e) => { setText('') props.onChange('') }} @@ -246,10 +239,13 @@ export default function AddressInput(props: AddressInputProps) { { - // here it is desired to close mobile-input view when clicked -> no "e.preventDefault()" + onMouseDown={(e) => + e.preventDefault() // prevents that input->onBlur is called when clicking the button + } + onClick={() => { onCurrentLocationSelected(props.onAddressSelected) + // but when clicked => close mobile-input view + searchInput.current!.blur() }} > From 7a43778dca784d4bf300b93d460de70438a64e5b Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 01:19:27 +0100 Subject: [PATCH 05/13] comment --- src/sidebar/search/AddressInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 2c7f5e2e..18cbcffa 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -226,7 +226,7 @@ export default function AddressInput(props: AddressInputProps) { style={text.length == 0 ? { display: 'none' } : {}} className={styles.btnInputClear} onMouseDown={(e) => - e.preventDefault() // prevents that input->onBlur is called when clicking the button + e.preventDefault() // prevents that input->onBlur is called when clicking the button } onClick={(e) => { setText('') @@ -240,11 +240,11 @@ export default function AddressInput(props: AddressInputProps) { style={text.length == 0 && hasFocus ? {} : { display: 'none' }} className={styles.btnCurrentLocation} onMouseDown={(e) => - e.preventDefault() // prevents that input->onBlur is called when clicking the button + e.preventDefault() // prevents that input->onBlur is called when clicking the button (loosing focus would hide this button) } onClick={() => { onCurrentLocationSelected(props.onAddressSelected) - // but when clicked => close mobile-input view + // but when clicked => we want to loose the focuse e.g. to close mobile-input view searchInput.current!.blur() }} > From 57bee16ef81371d0c6ee6a3b090fb92f53034116 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 18:05:57 +0100 Subject: [PATCH 06/13] further cleanup --- src/sidebar/search/AddressInput.module.css | 2 -- src/sidebar/search/AddressInput.tsx | 24 ++++++++++------------ 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css index 4703f0dc..a9dc9e87 100644 --- a/src/sidebar/search/AddressInput.module.css +++ b/src/sidebar/search/AddressInput.module.css @@ -6,8 +6,6 @@ } .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 18cbcffa..1839aa25 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -79,12 +79,6 @@ export default function AddressInput(props: AddressInputProps) { // if item is selected we need to clear the autocompletion list useEffect(() => setAutocompleteItems([]), [props.point]) - function hideSuggestions() { - geocoder.cancel() - setOrigAutocompleteItems(autocompleteItems) - setAutocompleteItems([]) - } - // highlighted result of geocoding results. Keep track which index is highlighted and change things on ArrowUp and Down // on Enter select highlighted result or the 0th if nothing is highlighted const [highlightedResult, setHighlightedResult] = useState(-1) @@ -188,6 +182,9 @@ export default function AddressInput(props: AddressInputProps) { > + e.preventDefault() // prevents that input->onBlur is called when just "mouse down" event (lose focus only for a proper click) + } onClick={() => searchInput.current!.blur()} > @@ -214,7 +211,9 @@ export default function AddressInput(props: AddressInputProps) { }} onBlur={() => { setHasFocus(false) - hideSuggestions() + geocoder.cancel() + setOrigAutocompleteItems(autocompleteItems) + setAutocompleteItems([]) }} value={text} placeholder={tr( @@ -226,11 +225,13 @@ export default function AddressInput(props: AddressInputProps) { style={text.length == 0 ? { display: 'none' } : {}} className={styles.btnInputClear} onMouseDown={(e) => - e.preventDefault() // prevents that input->onBlur is called when clicking the button + e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) } onClick={(e) => { setText('') props.onChange('') + // if we clear the text without focus then explicitely request it: + searchInput.current!.focus() }} > @@ -240,11 +241,11 @@ export default function AddressInput(props: AddressInputProps) { style={text.length == 0 && hasFocus ? {} : { display: 'none' }} className={styles.btnCurrentLocation} onMouseDown={(e) => - e.preventDefault() // prevents that input->onBlur is called when clicking the button (loosing focus would hide this button) + e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) } onClick={() => { onCurrentLocationSelected(props.onAddressSelected) - // but when clicked => we want to loose the focuse e.g. to close mobile-input view + // but when clicked => we want to lose the focus e.g. to close mobile-input view searchInput.current!.blur() }} > @@ -261,12 +262,9 @@ export default function AddressInput(props: AddressInputProps) { items={autocompleteItems} highlightedItem={autocompleteItems[highlightedResult]} onSelect={item => { - setHasFocus(false) if (item instanceof GeocodingItem) { - hideSuggestions() props.onAddressSelected(item.toText(), item.point) } else if (item instanceof POIQueryItem) { - hideSuggestions() handlePoiSearch(poiSearch, item.result, props.map) setText(item.result.text(item.result.poi)) } From 16bf6c2bd8bc3bc16cea2e3dd065b0a3a551f2f1 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 18:14:12 +0100 Subject: [PATCH 07/13] try without onTouchEnd --- src/sidebar/search/AddressInput.tsx | 2 +- src/sidebar/search/AddressInputAutocomplete.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 1839aa25..3b444252 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -268,7 +268,7 @@ export default function AddressInput(props: AddressInputProps) { handlePoiSearch(poiSearch, item.result, props.map) setText(item.result.text(item.result.poi)) } - searchInput.current!.blur() + searchInput.current!.blur() // is called in combination with e.preventDefault in AutocompleteEntry->onMouseDown }} /> diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx index 5516e309..957ca1ac 100644 --- a/src/sidebar/search/AddressInputAutocomplete.tsx +++ b/src/sidebar/search/AddressInputAutocomplete.tsx @@ -108,15 +108,16 @@ function AutocompleteEntry({ return ( From 0bf8a9f4c6cd53533d29ef40a2ec292b7d821aa4 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 18:18:14 +0100 Subject: [PATCH 08/13] minor fix --- src/sidebar/search/AddressInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 3b444252..196d332a 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -149,6 +149,7 @@ export default function AddressInput(props: AddressInputProps) { props.onAddressSelected(item.toText(), item.point) } } + searchInput.current!.blur() break } }, From 5191c54edb154df7f151495437c95d0200525b03 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 18:42:44 +0100 Subject: [PATCH 09/13] add comment to clearify onTouchEnd workaround --- src/sidebar/search/AddressInputAutocomplete.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx index 957ca1ac..5f8a2696 100644 --- a/src/sidebar/search/AddressInputAutocomplete.tsx +++ b/src/sidebar/search/AddressInputAutocomplete.tsx @@ -113,11 +113,11 @@ function AutocompleteEntry({ }} // using click events for mouse interaction and touch end to select an entry. onClick={() => onSelect()} - // TODO NOW is this onTouchEnd workaround still required? - // onTouchEnd={e => { - // e.preventDefault() // do not forward click to underlying component - // onSelect() - // }} + // minor workaround to improve success rate for click even if start and end location on screen are slightly different + onTouchEnd={e => { + e.preventDefault() // do not forward click to underlying component + onSelect() + }} > {children} From fb910bb6e408706962940ad439fa4ec1384bd97d Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 18:51:41 +0100 Subject: [PATCH 10/13] comment --- src/sidebar/search/AddressInput.tsx | 6 +++--- src/sidebar/search/AddressInputAutocomplete.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 196d332a..dbdca615 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -184,7 +184,7 @@ export default function AddressInput(props: AddressInputProps) { - e.preventDefault() // prevents that input->onBlur is called when just "mouse down" event (lose focus only for a proper click) + e.preventDefault() // prevents that input->onBlur is called when just "mouse down" event (lose focus only for onClick) } onClick={() => searchInput.current!.blur()} > @@ -231,7 +231,7 @@ export default function AddressInput(props: AddressInputProps) { onClick={(e) => { setText('') props.onChange('') - // if we clear the text without focus then explicitely request it: + // if we clear the text without focus then explicitly request it to improve usability: searchInput.current!.focus() }} > @@ -269,7 +269,7 @@ export default function AddressInput(props: AddressInputProps) { handlePoiSearch(poiSearch, item.result, props.map) setText(item.result.text(item.result.poi)) } - searchInput.current!.blur() // is called in combination with e.preventDefault in AutocompleteEntry->onMouseDown + searchInput.current!.blur() // see also AutocompleteEntry->onMouseDown }} /> diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx index 5f8a2696..f304a936 100644 --- a/src/sidebar/search/AddressInputAutocomplete.tsx +++ b/src/sidebar/search/AddressInputAutocomplete.tsx @@ -108,9 +108,6 @@ function AutocompleteEntry({ return ( From d52ef4bbedc50628b9b42317b6c039f6dd7e9163 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 22:18:51 +0100 Subject: [PATCH 11/13] fix keyboard tab cycling --- src/sidebar/search/AddressInput.tsx | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index dbdca615..c6758368 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -1,11 +1,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react' import { Coordinate, getBBoxFromCoord, QueryPoint, QueryPointType } from '@/stores/QueryStore' import { Bbox, GeocodingHit, ReverseGeocodingHit } from '@/api/graphhopper' -import Autocomplete, { - AutocompleteItem, - GeocodingItem, - POIQueryItem, -} from '@/sidebar/search/AddressInputAutocomplete' +import Autocomplete, { AutocompleteItem, GeocodingItem, POIQueryItem } from '@/sidebar/search/AddressInputAutocomplete' import ArrowBack from './arrow_back.svg' import Cross from '@/sidebar/times-solid-thin.svg' @@ -92,7 +88,6 @@ export default function AddressInput(props: AddressInputProps) { const onKeypress = useCallback( (event: React.KeyboardEvent) => { - const inputElement = event.target as HTMLInputElement if (event.key === 'Escape') { setText(origText) searchInput.current!.blur() @@ -149,7 +144,7 @@ export default function AddressInput(props: AddressInputProps) { props.onAddressSelected(item.toText(), item.point) } } - searchInput.current!.blur() + if (event.key == 'Enter') searchInput.current!.blur() break } }, @@ -183,8 +178,8 @@ export default function AddressInput(props: AddressInputProps) { > - e.preventDefault() // prevents that input->onBlur is called when just "mouse down" event (lose focus only for onClick) + onMouseDown={ + e => e.preventDefault() // prevents that input->onBlur is called when just "mouse down" event (lose focus only for onClick) } onClick={() => searchInput.current!.blur()} > @@ -223,12 +218,13 @@ export default function AddressInput(props: AddressInputProps) { /> - e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) + onMouseDown={ + e => e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) } - onClick={(e) => { + onClick={e => { setText('') props.onChange('') // if we clear the text without focus then explicitly request it to improve usability: @@ -239,10 +235,11 @@ export default function AddressInput(props: AddressInputProps) { - e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) + onMouseDown={ + e => e.preventDefault() // prevents that input->onBlur is called when clicking the button (would hide this button and prevent onClick) } onClick={() => { onCurrentLocationSelected(props.onAddressSelected) From 9f1699429f8c85c003daf3d46adb32a9a48472c8 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 22:29:14 +0100 Subject: [PATCH 12/13] minor comment --- src/sidebar/search/AddressInputAutocomplete.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx index f304a936..292a8cf7 100644 --- a/src/sidebar/search/AddressInputAutocomplete.tsx +++ b/src/sidebar/search/AddressInputAutocomplete.tsx @@ -116,8 +116,9 @@ function AutocompleteEntry({ onSelect() }} onMouseDown={e => { - e.preventDefault() // Prevent blur event for our input, see #398. + // prevents that input->onBlur is called when clicking the autocomplete item (focus would be lost and autocomplete items would disappear before they can be clicked) // See also the onMouseDown calls in the buttons in AddressInput.tsx created for the same reason. + e.preventDefault() }} > {children} From 4e706ea47e4ae99f3660ee9854b7c91c04b6b906 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 6 Dec 2024 22:50:18 +0100 Subject: [PATCH 13/13] TAB should not trigger geocode if we just pressed ENTER --- src/sidebar/search/AddressInput.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index c6758368..5c83fe41 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -127,7 +127,7 @@ export default function AddressInput(props: AddressInputProps) { if (item instanceof POIQueryItem) { handlePoiSearch(poiSearch, item.result, props.map) props.onAddressSelected(item.result.text(item.result.poi), undefined) - } else if (highlightedResult < 0) { + } else if (highlightedResult < 0 && !props.point.isInitialized) { // by default use the first result, otherwise the highlighted one getApi() .geocode(text, 'nominatim') @@ -144,6 +144,7 @@ export default function AddressInput(props: AddressInputProps) { props.onAddressSelected(item.toText(), item.point) } } + // do not disturb 'tab' cycle if (event.key == 'Enter') searchInput.current!.blur() break }