put clear button outside of input to avoid that input receives clicks…

… from it
graphhopper · Sep 8, 2023 · 3b81d6a · 3b81d6a
1 parent 1e3351c
commit 3b81d6a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 45 deletions.
diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
@@ -1,5 +1,8 @@
 .btnInputClear {
     display: none;
+    padding: 0 5px;
+    color: gray;
+    scale: 0.7;
 }
 
 .btnClose {
@@ -8,23 +11,31 @@
 
 .inputContainer {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr auto auto;
     grid-gap: 0;
+
+    box-sizing: border-box;
+    border: 1px solid #5b616a;
+    border-radius: 0.2rem;
+    /* for the radius we need some padding otherwise the corners will be nearly hidden */
+    padding: 1px;
 }
 
 .input {
-    box-sizing: border-box;
+    border: none;
     padding: 0.25rem 0.5rem;
     font-size: 1.05rem;
-    border: 1px solid #5b616a;
-    border-radius: 0.2rem;
-    -webkit-appearance: none;
 }
 
 .input:focus {
     outline: none;
 }
 
+.smallList {
+    grid-column: 2 / 3;
+    overflow-x: hidden;
+}
+
 @media (max-width: 44rem) {
     .fullscreen {
         position: fixed;
@@ -41,37 +52,28 @@
         grid-template-columns: auto 1fr auto;
     }
 
-    .fullscreen .smallList {
-        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;
+    }
+    /* when showing btnInputClear => remove the padding */
+    .fullscreen .input {
+        padding-right: 0;
     }
 }
 
-@media not all and (max-width: 44rem) and (hover: hover) {
+@media not all and (max-width: 44rem) {
     .inputContainer:hover .btnInputClear {
-        /* duplicate code, see (clear) */
         display: block;
-        background-color: white;
-        margin-left: -35px;
-        padding: 0 5px;
-        color: gray;
-        scale: 0.7;
+    }
+    /* when showing btnInputClear => remove the padding */
+    .inputContainer:hover .input {
+        padding-right: 0;
     }
 }
 

diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx
@@ -84,11 +84,18 @@ export default function AddressInput(props: AddressInputProps) {
     // on Enter select highlighted result or the 0th if nothing is highlighted
     const [highlightedResult, setHighlightedResult] = useState<number>(-1)
     useEffect(() => setHighlightedResult(-1), [autocompleteItems])
+
+    // for positioning of the autocomplete we need:
+    const searchInputContainer = useRef<HTMLInputElement>(null)
+
+    // to focus the input after clear button we need:
     const searchInput = useRef<HTMLInputElement>(null)
+
     const onKeypress = useCallback(
         (event: React.KeyboardEvent<HTMLInputElement>) => {
+            const inputElement = event.target as HTMLInputElement
             if (event.key === 'Escape') {
-                searchInput.current!.blur()
+                inputElement.blur()
                 // onBlur is deactivated for mobile so force:
                 setHasFocus(false)
                 hideSuggestions()
@@ -114,7 +121,7 @@ export default function AddressInput(props: AddressInputProps) {
                         const item = autocompleteItems[index]
                         if (item instanceof GeocodingItem) props.onAddressSelected(item.toText(), item.point, item.bbox)
                     }
-                    searchInput.current!.blur()
+                    inputElement.blur()
                     // onBlur is deactivated for mobile so force:
                     setHasFocus(false)
                     hideSuggestions()
@@ -130,6 +137,7 @@ export default function AddressInput(props: AddressInputProps) {
     return (
         <div className={containerClass}>
             <div
+                ref={searchInputContainer}
                 className={[
                     styles.inputContainer,
                     // show line (border) where input would be moved if dropped
@@ -147,7 +155,7 @@ export default function AddressInput(props: AddressInputProps) {
                         hideSuggestions()
                     }}
                 >
-                    <ArrowBack/>
+                    <ArrowBack />
                 </PlainButton>
                 <input
                     style={props.moveStartIndex == props.index ? { borderWidth: '2px', margin: '-1px' } : {}}
@@ -179,25 +187,25 @@ 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>
-                )}
+
+                <PlainButton
+                    style={text.length == 0 ? { display: 'none' } : {}}
+                    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!}
+                        inputRef={searchInputContainer.current!}
                         index={props.index}
                         isSmallScreen={isSmallScreen}
                     >
@@ -241,9 +249,7 @@ function ResponsiveAutocomplete({
     return (
         <>
             {isSmallScreen ? (
-                <div className={styles.smallList}>
-                    {children}
-                </div>
+                <div className={styles.smallList}>{children}</div>
             ) : (
                 <PopUp inputElement={inputRef} keepClearAtBottom={index > 5 ? 270 : 0}>
                     {children}

diff --git a/src/sidebar/search/AddressInputAutocomplete.module.css b/src/sidebar/search/AddressInputAutocomplete.module.css
@@ -1,3 +1,13 @@
+.autocompleteItem:not(:last-child) {
+    border-bottom: 1px lightgray solid;
+}
+
+@media (max-width: 44rem) {
+    .autocompleteItem:first-child {
+        border-top: 1px lightgray solid;
+    }
+}
+
 .selectableItem {
     display: block;
     width: 100%;