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