diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index 4e3de61eb..86b74e16a 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -92,13 +92,13 @@ export default class MoreScreen extends Combine { if (onMainScreen) { search.focus() + document.addEventListener("keydown", function (event) { + if (event.ctrlKey && event.code === "KeyF") { + search.focus() + event.preventDefault() + } + }) } - document.addEventListener("keydown", function (event) { - if (event.ctrlKey && event.code === "KeyF") { - search.focus() - event.preventDefault() - } - }) const searchBar = new Combine([ Svg.search_svg().SetClass("w-8"), diff --git a/UI/BigComponents/SearchAndGo.ts b/UI/BigComponents/SearchAndGo.ts index 2418e55e6..56290896d 100644 --- a/UI/BigComponents/SearchAndGo.ts +++ b/UI/BigComponents/SearchAndGo.ts @@ -1,6 +1,5 @@ import { UIEventSource } from "../../Logic/UIEventSource" import { Translation } from "../i18n/Translation" -import { VariableUiElement } from "../Base/VariableUIElement" import Svg from "../../Svg" import { TextField } from "../Input/TextField" import { Geocoding } from "../../Logic/Osm/Geocoding" @@ -10,6 +9,7 @@ import Combine from "../Base/Combine" import Locale from "../i18n/Locale" export default class SearchAndGo extends Combine { + private readonly _searchField: TextField constructor(state: { leafletMap: UIEventSource; selectedElement?: UIEventSource }) { const goButton = Svg.search_ui().SetClass("w-8 h-8 full-rounded border-black float-right") @@ -74,6 +74,11 @@ export default class SearchAndGo extends Combine { } searchField.enterPressed.addCallback(runSearch) + this._searchField = searchField goButton.onClick(runSearch) } + + focus() { + this._searchField.focus() + } } diff --git a/UI/DefaultGUI.ts b/UI/DefaultGUI.ts index 211fdec7e..28c26eeec 100644 --- a/UI/DefaultGUI.ts +++ b/UI/DefaultGUI.ts @@ -238,11 +238,18 @@ export default class DefaultGUI { .AttachTo("on-small-screen") new Combine([ - Toggle.If(state.featureSwitchSearch, () => - new SearchAndGo(state).SetClass( + Toggle.If(state.featureSwitchSearch, () => { + const search = new SearchAndGo(state).SetClass( "shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto" ) - ), + document.addEventListener("keydown", function (event) { + if (event.ctrlKey && event.code === "KeyF") { + search.focus() + event.preventDefault() + } + }) + return search + }), ]).AttachTo("top-right") new LeftControls(state, guiState).AttachTo("bottom-left")