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

… Safari
graphhopper · Sep 7, 2023 · 1797f60 · 1797f60
1 parent cd2d0bd
commit 1797f60
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
@@ -1,5 +1,5 @@
-.container {
-    position: relative;
+.btnInputClear {
+    display: none;
 }
 
 .btnClose {
@@ -14,7 +14,6 @@
 
 .input {
     box-sizing: border-box;
-    width: 100%;
     padding: 0.25rem 0.5rem;
     font-size: 1.05rem;
     border: 1px solid #5b616a;
@@ -39,18 +38,41 @@
     }
 
     .fullscreen .inputContainer {
-        grid-template-columns: auto 1fr;
+        grid-template-columns: auto 1fr auto;
     }
 
     .fullscreen .smallList {
-        grid-column: 2 / 2;
+        grid-column: 2;
+        overflow-x: hidden;
     }
 
     .fullscreen .btnClose {
         display: block;
         margin: 0;
         padding: 5px 15px 5px 5px;
     }
+
+    .fullscreen .btnInputClear {
+        /* duplicate code, see (clear) */
+        display: block;
+        background-color: white;
+        margin-left: -35px;
+        padding: 0 5px;
+        color: gray;
+        scale: 0.7;
+    }
+}
+
+@media not all and (max-width: 44rem) and (hover: hover) {
+    .inputContainer:hover .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'
@@ -142,7 +143,6 @@ export default function AddressInput(props: AddressInputProps) {
                 <PlainButton
                     className={styles.btnClose}
                     onClick={() => {
-                        setHasFocus(false)
                         hideSuggestions()
                     }}
                 >
@@ -161,10 +161,9 @@ export default function AddressInput(props: AddressInputProps) {
                         props.onChange(e.target.value)
                     }}
                     onKeyDown={onKeypress}
-                    onFocus={event => {
-                        props.clearSelectedInput()
+                    onFocus={() => {
                         setHasFocus(true)
-                        event.target.select()
+                        props.clearSelectedInput()
                     }}
                     onBlur={() => {
                         // leave the fullscreen only when clicking on the back button
@@ -177,6 +176,18 @@ 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}
+                        onClick={() => {
+                            setText('')
+                            props.onChange('')
+                            searchInput.current!.focus()
+                        }}
+                    >
+                        <Cross />
+                    </PlainButton>
+                )}
 
             {autocompleteItems.length > 0 && (
                 <ResponsiveAutocomplete

diff --git a/src/sidebar/search/AddressInputAutocomplete.tsx b/src/sidebar/search/AddressInputAutocomplete.tsx
@@ -137,15 +137,15 @@ function AutocompleteEntry({
             // using click events for mouse interaction to select an entry.
             onClick={() => onSelect()}
             // On touch devices when listening for the click or pointerup event the next or last address input would
-            // be immediately selected after the 'onSelectHit' method was called. This can be prevented by listening
+            // be immediately selected after the 'onSelect' method was called. This can be prevented by listening
             // for the touchend event separately.
             onTouchEnd={e => {
                 e.preventDefault()
                 if (!isCancelled) onSelect()
             }}
             // listen for cancel events to prevent selections in case the result list is e.g. scrolled on touch devices
             onPointerCancel={() => setIsCancelled(true)}
-            // prevent blur event for input textbox
+            // prevent blur event for input (onBlur): we need this when the autocomplete of the larger screen is used on touch devices
             onPointerDown={e => {
                 setIsCancelled(false)
                 e.preventDefault()

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