diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
index 4cd9fca2..a639ac2a 100644
--- 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
index 43718ac5..a8ef194d 100644
--- 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'
@@ -161,10 +162,9 @@ export default function AddressInput(props: AddressInputProps) {
props.onChange(e.target.value)
}}
onKeyDown={onKeypress}
- onFocus={event => {
+ onFocus={() => {
setHasFocus(true)
props.clearSelectedInput()
- event.target.select()
}}
onBlur={() => {
// Suppress onBlur if there was a click on a suggested item.
@@ -179,6 +179,21 @@ export default function AddressInput(props: AddressInputProps) {
type == QueryPointType.From ? 'from_hint' : type == QueryPointType.To ? 'to_hint' : 'via_hint'
)}
/>
+ {text.length > 0 && (
+ setPointerDownOnSuggestion(true)}
+ onMouseLeave={() => setPointerDownOnSuggestion(false)}
+ onMouseUp={() => setPointerDownOnSuggestion(false)}
+ onClick={() => {
+ setText('')
+ props.onChange('')
+ searchInput.current!.focus()
+ }}
+ >
+
+
+ )}
{autocompleteItems.length > 0 && (
diff --git a/src/sidebar/times-solid-thin.svg b/src/sidebar/times-solid-thin.svg
new file mode 100644
index 00000000..40a47c03
--- /dev/null
+++ b/src/sidebar/times-solid-thin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file