Hi. Looking for how I can automatically set the focus of an element in kobweb / compose-html. (I wan...

# kobweb

[stantronic]

Hi. Looking for how I can automatically set the focus of an element in kobweb / compose-html. (I want a click in a larger container to set focus on a contained input field. Any suggestions? Any idea where to look in docs?

[S.]

this should get you somewhere https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
the first example is probably pretty much what you want

[stantronic]

Cheers. I figured it out eventually 👍

[David Herman]

Hey, sorry I didn't see this! Glad you figured it out.

If anyone else happens to stumble onto this thread in the future, the relevant README section is
https://github.com/varabyte/kobweb?tab=readme-ov-file#elementrefscope-and-raw-html-elements

One of the examples is actually about focusing:

Box(ref = ref { element -> element.focus() })

(which uses the relevant standard library focus method linked to by @S. above; of course you can use any other standard library Element APIs here)

If you have a standard Compose HTML element like Div or Span (Box is a Kobweb thing), that's discussed in the subsection: https://github.com/varabyte/kobweb?tab=readme-ov-file#compose-html-refs

and would look like:

Div(attrs = {
    ref { element -> element.focus(); onDispose { } }
})

[stantronic]

Ah great! that's the kind of thing I was looking for. I got a bit lost in the long README. I ended up doing

onClick {
     val field = document.getElementById("input") as HTMLElement
     field.focus()
  }

but the Kobweb API looks a bit nicer. Will give it a try. thanks 😄

[David Herman]

You're welcome! The README is a beast. The plan in the next few months is to move it to a docs site with sidebars and everything broken up into separate pages.

[David Herman]

Asking here or on the Discord for now is the best way to work around the lack of better docs. I'm glad you found your way here.

[stantronic]

I'm guessing that will be a docs site built with Kobweb?

[David Herman]

Correct -- https://kobweb.varabyte.com/docs will be its home