onClick isn't triggered for touch devices (#364)

* onClick isn't triggered for touch devices, #363 * reintroduce pointerdown workaround but make it explicitely only for mousedown * use original solution but without setIsCancelled as this prevention does not seem to work
graphhopper · Nov 2, 2023 · 7950a2f · 7950a2f
1 parent f45f4c5
commit 7950a2f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx
@@ -37,7 +37,6 @@ export default function AddressInput(props: AddressInputProps) {
 
     // keep track of focus and toggle fullscreen display on small screens
     const [hasFocus, setHasFocus] = useState(false)
-    const [pointerDownOnSuggestion, setPointerDownOnSuggestion] = useState(false)
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
 
     // container for geocoding results which gets set by the geocoder class and set to empty if the underlying query point gets changed from outside
@@ -175,12 +174,10 @@ export default function AddressInput(props: AddressInputProps) {
                         props.clearDragDrop()
                     }}
                     onBlur={() => {
-                        // Suppress onBlur if there was a click on a suggested item.
-                        // Otherwise, the item would be removed before (hideSuggestions) its onclick handler can be called.
-                        if (isSmallScreen || pointerDownOnSuggestion) return
+                        // Suppress onBlur if we are on the small screen
+                        if (isSmallScreen) return
                         setHasFocus(false)
                         hideSuggestions()
-                        setPointerDownOnSuggestion(false)
                     }}
                     value={text}
                     placeholder={tr(
@@ -191,9 +188,6 @@ export default function AddressInput(props: AddressInputProps) {
                 <PlainButton
                     style={text.length == 0 ? { display: 'none' } : {}}
                     className={styles.btnInputClear}
-                    onMouseDown={() => setPointerDownOnSuggestion(true)}
-                    onMouseLeave={() => setPointerDownOnSuggestion(false)}
-                    onMouseUp={() => setPointerDownOnSuggestion(false)}
                     onClick={() => {
                         setText('')
                         props.onChange('')
@@ -212,7 +206,6 @@ export default function AddressInput(props: AddressInputProps) {
                         <Autocomplete
                             items={autocompleteItems}
                             highlightedItem={autocompleteItems[highlightedResult]}
-                            setPointerDown={setPointerDownOnSuggestion}
                             onSelect={item => {
                                 setHasFocus(false)
                                 if (item instanceof GeocodingItem) {

diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx
@@ -38,16 +38,11 @@ export interface AutocompleteProps {
     items: AutocompleteItem[]
     highlightedItem: AutocompleteItem
     onSelect: (hit: AutocompleteItem) => void
-    setPointerDown: (b: boolean) => void
 }
 
-export default function Autocomplete({ items, highlightedItem, onSelect, setPointerDown }: AutocompleteProps) {
+export default function Autocomplete({ items, highlightedItem, onSelect }: AutocompleteProps) {
     return (
-        <ul
-            onPointerDown={() => setPointerDown(true)}
-            onPointerUp={() => setPointerDown(false)}
-            onPointerLeave={() => setPointerDown(false)}
-        >
+        <ul>
             {items.map((item, i) => (
                 <li key={i} className={styles.autocompleteItem}>
                     {mapToComponent(item, highlightedItem === item, onSelect)}
@@ -136,7 +131,20 @@ function AutocompleteEntry({
 }) {
     const className = isHighlighted ? styles.selectableItem + ' ' + styles.highlightedItem : styles.selectableItem
     return (
-        <button className={className} onClick={() => onSelect()}>
+        <button
+            className={className}
+            // using click events for mouse interaction and touch end to select an entry.
+            onClick={() => onSelect()}
+            onTouchEnd={e => {
+                e.preventDefault()
+                onSelect()
+            }}
+
+            // prevent blur event for our input (seems to be only required for mouse)
+            onMouseDown={e => {
+                e.preventDefault()
+            }}
+        >
             {children}
         </button>
     )