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