# How to clear search input when a user clicks outside of search result element

**URL:** <https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446>\
**Category:** Ask us anything\
**Created:** [August 26, 2024, 5:52am UTC](https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446 "2024-08-26T05:52:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jay12](https://avatars.discourse-cdn.com/v4/letter/j/6f9a4e/32.png) [@Jay12](https://community.weweb.io/u/Jay12)\
**Post date:** [August 26, 2024, 5:52am UTC](https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446/1 "2024-08-26T05:52:26Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6722b798de312024bf91473939b026caa7371371.jpeg)

I want to clear search input and close the search result element like the attached image when user clicks outside of the search element.

Here is what I have tried

- make on-blur workflow to search input element. The problem with this method is if user clicks one of the elements within search result, page navigation I expected does not work as on-blur workflow completes.
- I can’t make on blur workflow to the whole search element so that it can detect only clicks outside of the search element.

So I am stuck… could anyone help?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [August 26, 2024, 6:08am UTC](https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446/2 "2024-08-26T06:08:57Z")

</div>

Hello, you can use the On blur event. To prevent the clicking into results from also erasing the value, you can use the mousedown event on the results to set up the stop propagation. I have my own custom component on the marketplace for this, and in the documentation, I exactly describe this. Have a look in the See demo, on the bottom of the page/end of the video:

[https://marketplace.weweb.io/libraries/df32b91d-b9da-42b3-9e59-47f78fbc2579/](https://marketplace.weweb.io/libraries/df32b91d-b9da-42b3-9e59-47f78fbc2579/)

---

<div class="post-metadata">

**Author:** ![Jay12](https://avatars.discourse-cdn.com/v4/letter/j/6f9a4e/32.png) [@Jay12](https://community.weweb.io/u/Jay12)\
**Post date:** [August 26, 2024, 6:16am UTC](https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446/3 "2024-08-26T06:16:26Z")

</div>

hey I was actually watching your video just now and found the solution right there 😀

I was not sure of what the stop propagation event is. I wish there are more documents for it.

Anyway I was able to fix it.Thanks for help always!

---

<div class="post-metadata">

**Author:** ![arturosanz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/arturosanz/32/4595_2.png) [@arturosanz](https://community.weweb.io/u/arturosanz)\
**Post date:** [September 7, 2024, 11:59pm UTC](https://community.weweb.io/t/how-to-clear-search-input-when-a-user-clicks-outside-of-search-result-element/10446/4 "2024-09-07T23:59:23Z")

</div>

@Jay12 here you can learn about event propagation [Bubbling and capturing](https://javascript.info/bubbling-and-capturing)