Trying to achieve a dropdown / popover with focusin event

Victor Giron · 2023-11-17T06:25:21.769+00:00

Hey everyone, dropdowns that allow me to interact with the content and then close if I click outside are an important what I'm building.To achieve this I had the idea to use the focusin/focusout events on the popover. And use a button to trigger the event "focus".I have everything set up but for some reason, the "focus" step on the workflow is not focusing the popover, maybe that's the reason is not showing.Does anybody have achieved something like this in any other simpler way?

Victor Giron

2 years ago

Hey everyone, dropdowns that allow me to interact with the content and then close if I click outside are an important what I'm building.
To achieve this I had the idea to use the focusin/focusout events on the popover. And use a button to trigger the event "focus".

I have everything set up but for some reason, the "focus" step on the workflow is not focusing the popover, maybe that's the reason is not showing.

Does anybody have achieved something like this in any other simpler way?
Tom Ireland

2 years ago

@Victor Giron - Not 100% sure on the issue but if you're trying to focus the popover, I'd set an id attribute and then in your button click, add the 'Focus' action and use 'Get element by id' in your formula with the id of the popover.

If it's hidden, it may be that focus won't work until you change the hide to a truthy value, so I'd have button click to set a page variable to true to display the popover if that makes sense. Because it's within a component, it'll happily do it's thing there and you don't have to worry about handling that on the page level outside of the component if you catch my drift?
@Tom Ireland
@Victor Giron - Not 100% sure on the issue but if you're trying to focus the popover, I'd set an id attribute and then in your button click, add the 'Focus' action and use 'Get element by id' in your formula with the id of the popover.

If it's hidden, it may be that focus won't work until you change the hide to a truthy value, so I'd have button click to set a page variable to true to display the popover if that makes sense. Because it's within a component, it'll happily do it's thing there and you don't have to worry about handling that on the page level outside of the component if you catch my drift?
Victor Giron

2 years ago

That makes a lot of sense, I’ll try to do that
Victor Giron

2 years ago

It worked! I just needed to make it visible first and then set the focus
🙌1

Trying to achieve a dropdown / popover with focusin event

Victor Giron

Tom Ireland

Victor Giron

Victor Giron