Autofocus search when opened
This commit is contained in:
parent
4f12db5cb9
commit
fb889ea32f
2 changed files with 28 additions and 2 deletions
|
@ -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
|
||||
|
|
7
src/search_ffi.mjs
Normal file
7
src/search_ffi.mjs
Normal file
|
@ -0,0 +1,7 @@
|
|||
export function getElem(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
export function focus(elem) {
|
||||
elem.focus();
|
||||
}
|
Loading…
Reference in a new issue