diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css index 6b405fc6..297eed18 100644 --- a/src/sidebar/search/AddressInput.module.css +++ b/src/sidebar/search/AddressInput.module.css @@ -1,7 +1,7 @@ .btnInputClear { display: none; padding: 0 5px; - color: gray; + color: grey; scale: 0.7; } @@ -80,11 +80,11 @@ .topBorder { padding-top: 3px; margin-top: -5px; - border-top: dashed gray 2px; + border-top: dashed grey 2px; } .bottomBorder { padding-bottom: 3px; margin-bottom: -5px; - border-bottom: dashed gray 2px; + border-bottom: dashed grey 2px; } diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx index 4eb7bd86..c5bf25c6 100644 --- a/src/sidebar/search/AddressInput.tsx +++ b/src/sidebar/search/AddressInput.tsx @@ -130,7 +130,8 @@ export default function AddressInput(props: AddressInputProps) { [autocompleteItems, highlightedResult] ) - const containerClass = hasFocus ? styles.container + ' ' + styles.fullscreen : styles.container + // the "fullscreen" css is only defined for smallscreen + const containerClass = hasFocus ? styles.fullscreen : '' const type = props.point.type return ( @@ -174,10 +175,7 @@ export default function AddressInput(props: AddressInputProps) { props.clearDragDrop() }} onBlur={() => { - // Suppress onBlur if we are on the small screen - if (isSmallScreen) return - setHasFocus(false) - hideSuggestions() + }} value={text} placeholder={tr( @@ -219,6 +217,7 @@ export default function AddressInput(props: AddressInputProps) { const coordinate = textToCoordinate(item.search) if (!coordinate) geocoder.request(item.search, 'nominatim') } + searchInput.current!.blur() }} /> diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx index 75d636c1..90b78bcd 100644 --- a/src/sidebar/search/AddressInputAutocomplete.tsx +++ b/src/sidebar/search/AddressInputAutocomplete.tsx @@ -136,13 +136,9 @@ function AutocompleteEntry({ // using click events for mouse interaction and touch end to select an entry. onClick={() => onSelect()} onTouchEnd={e => { - e.preventDefault() + e.preventDefault() // do not forward click to underlying component onSelect() }} - // prevent blur event for our input (seems to be only required for mouse) - onMouseDown={e => { - e.preventDefault() - }} > {children}