fix for touch devices and smallscreen: often input keeps focus after …

…suggestion is touched, occurred after #363 (#366)
graphhopper · Dec 4, 2023 · 2340ebb · 2340ebb
1 parent 122fee6
commit 2340ebb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 13 deletions.
diff --git 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
@@ -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()
                             }}
                         />
                     </ResponsiveAutocomplete>

diff --git 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}
         </button>