How do I set focus on an element after clicking a button?

Ask us anything How do I?
1

Is it possible to set focus on a search bar right after hitting a button? Please see the example here (Vuexy - Angular 12+ Bootstrap Admin Template). When search icon is clicked, the original header disappears and a search bar takes its place with a flashing cursor. I can make the search bar appear in WeWeb by changing a variable tied to display status. However, how can we set focus on the search bar, so that the user does not need to click it again?

2

I was able to set focus on the text input element by using a workflow (trigger by clicking a button) with javascript on element ID “txtMenuSearch”. The code was: document.getElementById(“txtMenuSearch”).focus(); Thanks!

4 Likes
3

Awesome! Well done @Kevian and thanks a lot for taking the time to share the solution you found!! :hugs:

4

Any suggestions on how I could make this work for an autocomplete input?

5

@kyanaloe If you are talking about Weweb autocomplete input, then you will need to change the selector to target the input inside the component.

document.getElementById("txtMenuSearch").getElementsByTagName("input")[0].focus()