# How to tell when outside of component is clicked **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 27, 2025, 8:42pm UTC](https://forum.inductiveautomation.com/t/how-to-tell-when-outside-of-component-is-clicked/103008 "2025-02-27T20:42:43Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![Noah\_Gilgo](https://avatars.discourse-cdn.com/v4/letter/n/c89c15/32.png) [@Noah\_Gilgo](https://forum.inductiveautomation.com/u/Noah_Gilgo)\ **Post date:** [February 27, 2025, 8:42pm UTC](https://forum.inductiveautomation.com/t/how-to-tell-when-outside-of-component-is-clicked/103008/1 "2025-02-27T20:42:43Z")
I've been working on a pseudo-dropdown that displays views instead of simple text options. My basic layout for this pseudo-dropdown is a Text Field component that the user enters query text into and a Flex Repeater that dynamically renders views beneath the text field based on the text entered into it. As a typical dropdown would behave, I want the Flex Repeater to disappear whenever the user clicks outside of the container. I initially tried solving this by adding an onBlur event to the text field component: while this did the job, the onBlur event _always_ fires before anything else, meaning that actually trying to click an option in the flex component would just close it before the onClick event for the instance was triggered, preventing the user from selecting an option. Is there a simple remedy for this problem? I had another idea to put the onBlur event in the container holding all of the components for the pseudo-dropdown, but I don't really know if or how the user could "focus" a container to begin with. ---
**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\ **Post date:** [February 27, 2025, 9:54pm UTC](https://forum.inductiveautomation.com/t/how-to-tell-when-outside-of-component-is-clicked/103008/2 "2025-02-27T21:54:55Z")
~~I did a little inspecting and it would seem that there is not `tabIndex` specified on the containers so they cannot accept focus like something normally would be able to like your input.~~ Interesting that they have `onFocus` and `onBlur` as options though... Maybe I am missing something. ~~@paul-griffith or @Kevin.Herron is there a reason `tabIndex` is not an exposed property for users to be able to control? Especially with the containers presenting the option of focus and blur?~~ Edit: This is an option in the meta section: > [@Focus on a icon when clicked](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/4): > > Lots of knowledge to lay down here... For an element (Component) to receive focus, it must have an emitted HTML tabindex attribute. Icons do not have this. Most displays don't. Some do (Tables, Dashboard, Tag Browse Tree) because those Display components actually contain an input. So as of today, there is no way to apply/force focus onto most of our display components. We just happen to be working on a feature for 8.1.39 which allows for specifying a tabIndex prop as part of the META category… Meaning if you just add tabIndex in the `meta` section of the component props that it will allow focus and your _dropdown_ should work like you 'd expect since it wont' lose focus when clicking items within itself. ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [February 27, 2025, 10:15pm UTC](https://forum.inductiveautomation.com/t/how-to-tell-when-outside-of-component-is-clicked/103008/3 "2025-02-27T22:15:00Z")
I'd display a transparent container that covers the entire page (using absolute positioning and an appropriate z-index), then listen for clicks on that.