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.
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:
