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

**URL:** <https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912>\
**Category:** How do I?\
**Created:** [July 30, 2022, 2:49pm UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912 "2022-07-30T14:49:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kevian](https://avatars.discourse-cdn.com/v4/letter/k/3da27b/32.png) [@Kevian](https://community.weweb.io/u/Kevian)\
**Post date:** [July 30, 2022, 2:49pm UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912/1 "2022-07-30T14:49:47Z")

</div>

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](https://pixinvent.com/demo/vuexy-angular-admin-dashboard-template/demo-4/apps/todo/all)). 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?

---

<div class="post-metadata">

**Author:** ![Kevian](https://avatars.discourse-cdn.com/v4/letter/k/3da27b/32.png) [@Kevian](https://community.weweb.io/u/Kevian)\
**Post date:** [July 31, 2022, 11:08am UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912/2 "2022-07-31T11:08:43Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 8, 2022, 7:49am UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912/3 "2022-08-08T07:49:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [August 12, 2022, 2:16am UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912/4 "2022-08-12T02:16:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [August 16, 2022, 8:37am UTC](https://community.weweb.io/t/how-do-i-set-focus-on-an-element-after-clicking-a-button/912/5 "2022-08-16T08:37:35Z")

</div>

@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()`