Autofocus search when opened

src/elekf/web/components/search.gleam

@@ -5,9 +5,12 @@ import lustre/element/html.{button, div, input}
 import lustre/attribute
 import lustre/event
 import elekf/web/components/icon.{Alt, icon}
+import elekf/utils/lustre
 
 const search_bar_input_id = "search-bar-input"
 
+type SearchElement
+
 pub type Model {
   Model(search_text: String, show_search: Bool)
 }
@@ -21,9 +24,14 @@ pub fn init() {
   Model(search_text: "", show_search: False)
 }
 
-pub fn update(model, msg) {
+pub fn update(model: Model, msg) {
   case msg {
-    ToggleShow -> Model(..model, show_search: !model.show_search)
+    ToggleShow -> {
+      let show_search = !model.show_search
+      lustre.after_next_render(focus)
+
+      Model(..model, show_search: show_search)
+    }
     UpdateSearch(text) -> Model(..model, search_text: text)
   }
 }
@@ -60,3 +68,14 @@ pub fn view(model: Model) {
     ],
   )
 }
+
+fn focus() {
+  get_elem(search_bar_input_id)
+  |> do_focus()
+}
+
+@external(javascript, "../../../search_ffi.mjs", "focus")
+fn do_focus(elem: SearchElement) -> Nil
+
+@external(javascript, "../../../search_ffi.mjs", "getElem")
+fn get_elem(id: String) -> SearchElement

src/search_ffi.mjs

@@ -0,0 +1,7 @@
+export function getElem(id) {
+  return document.getElementById(id);
+}
+
+export function focus(elem) {
+  elem.focus();
+}