Add 'ctrl+F' to select the search box immediately

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"),

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<any>; selectedElement?: UIEventSource<any> }) {
         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()
+    }
 }

UI/DefaultGUI.ts

@@ -238,11 +238,18 @@ export default class DefaultGUI {
             .AttachTo("on-small-screen")
 
         new Combine([
-            Toggle.If(state.featureSwitchSearch, () =>
+            Toggle.If(state.featureSwitchSearch, () => {
-                new SearchAndGo(state).SetClass(
+                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")