new clear text button instead of selecting text which doesn't work in…

… Safari
graphhopper · Sep 2, 2023 · dae68b2 · dae68b2
1 parent 7a2f13f
commit dae68b2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
@@ -2,6 +2,20 @@
     position: relative;
 }
 
+.btnInputClear {
+    display: none;
+}
+
+.inputContainer:hover .btnInputClear {
+    /* duplicate code, see (clear) */
+    display: block;
+    background-color: white;
+    margin-left: -35px;
+    padding: 0 5px;
+    color: gray;
+    scale: 0.7;
+}
+
 .btnClose {
     display: none;
 }
@@ -35,7 +49,7 @@
     }
 
     .fullscreen .inputContainer {
-        grid-template-columns: auto 1fr;
+        grid-template-columns: auto 1fr auto;
     }
 
     .fullscreen .smallList {
@@ -47,6 +61,17 @@
         margin: 0;
         padding: 5px 15px 5px 5px;
     }
+
+    .fullscreen .inputContainer:hover .btnInputClear,
+    .fullscreen .btnInputClear {
+        /* duplicate code, see (clear) */
+        display: block;
+        background-color: white;
+        margin-left: -35px;
+        padding: 0 5px;
+        color: gray;
+        scale: 0.7;
+    }
 }
 
 .topBorder {

diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx
@@ -9,6 +9,7 @@ import Autocomplete, {
 } from '@/sidebar/search/AddressInputAutocomplete'
 
 import ArrowBack from './arrow_back.svg'
+import Cross from '@/sidebar/times-solid-thin.svg'
 import styles from './AddressInput.module.css'
 import Api, { getApi } from '@/api/Api'
 import { tr } from '@/translation/Translation'
@@ -155,10 +156,9 @@ export default function AddressInput(props: AddressInputProps) {
                         props.onChange(e.target.value)
                     }}
                     onKeyDown={onKeypress}
-                    onFocus={event => {
+                    onFocus={() => {
                         props.clearSelectedInput()
                         setHasFocus(true)
-                        event.target.select()
                     }}
                     onBlur={() => {
                         // Suppress onBlur if there was a click on a suggested item.
@@ -173,6 +173,21 @@ export default function AddressInput(props: AddressInputProps) {
                         type == QueryPointType.From ? 'from_hint' : type == QueryPointType.To ? 'to_hint' : 'via_hint'
                     )}
                 />
+                {text.length > 0 && (
+                    <PlainButton
+                        className={styles.btnInputClear}
+                        onMouseDown={() => setPointerDownOnSuggestion(true)}
+                        onMouseLeave={() => setPointerDownOnSuggestion(false)}
+                        onMouseUp={() => setPointerDownOnSuggestion(false)}
+                        onClick={() => {
+                            setText('')
+                            props.onChange('')
+                            searchInput.current!.focus()
+                        }}
+                    >
+                        <Cross />
+                    </PlainButton>
+                )}
 
                 {autocompleteItems.length > 0 && (
                     <ResponsiveAutocomplete inputRef={searchInput.current!} isSmallScreen={isSmallScreen}>

diff --git a/src/sidebar/times-solid-thin.svg b/src/sidebar/times-solid-thin.svg