Its possible to create a dropdown on interaction 2.0?

Hi,

I would like to know if anyone knows if it is possible to create a dropdown directly in pinegrow.

What I haven’t found is a way to click outsid to closes the dropdown…

I.e:

{“trg”:“click”} > opens the dropdown
{“trg”:“clickoutside”} > closes dropdown

Does anyone know if there is any way to recreate a clickoutside?
Thanks

1 Like

I’ve done one implementation, this is using basically using CSS trick.
With integration I’m only applying class.

Let me know what do you find.

Very good, but I couldn’t replicate and find the function that makes the dropdown collapse by clicking outside of it…

Where did you set this up?

Hi @lucaspchara,
The trick here is to add a :before element to your .dropdown--toggle. Set that before element to be transparent and full screen over the top of all the other page content. Then you set the animation to toggle between forward and reverse in the advanced options. So basically, the animation target becomes the entire screen. Check out the stylesheet of the project.
Let me know if this helps,
Bob

2 Likes

Well, thats work, thanks.

But I feel that this is not a very good solution, when opening a dropdown it will not be possible to click on another part of the site (such as a menu, link, etc…)

Maybe in the future Pinegrow will add a “clickoutside” function…?

Yes, and it was an API oversight because semantically a button cannot have a value. You can handle its click event, that’s how it’s supposed to work. If you need a selection functionality, you will have to use Select or create some custom widget.