comment

Author: karussell

src/sidebar/search/AddressInput.tsx

@@ -184,7 +184,7 @@ export default function AddressInput(props: AddressInputProps) {
                 <PlainButton
                     className={styles.btnClose}
                     onMouseDown={(e) =>
-                        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
                             }}
                         />
                     </ResponsiveAutocomplete>

src/sidebar/search/AddressInputAutocomplete.tsx

@@ -108,16 +108,17 @@ function AutocompleteEntry({
     return (
         <button
             className={className}
-            onMouseDown={e => {
-                e.preventDefault() // prevent blur event for our input, see #398
-            }}
             // using click events for mouse interaction and touch end to select an entry.
             onClick={() => 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()
             }}
+            onMouseDown={e => {
+                e.preventDefault() // Prevent blur event for our input, see #398.
+                // See also the onMouseDown calls in the buttons in AddressInput.tsx created for the same reason.
+            }}
         >
             {children}
         </button>