Do not close the group focus when clicking outside

Has anyone managed to do this? I’ve spent the whole afternoon banging my head over it and still haven’t figured it out. I’ve seen that other people have had this problem before — has anyone been able to solve it?

Yes but it is a PAIN IN DA REAR! One of the worst ‘impossible to do’ things that I unfortunately just had to make possible. Caused a lot of knock on effects, all of which I solved, but really would likely never do again. This is why I request people upvote the idea to make it a feature.

The way to do it required code. It also rendered most elements inside of it, incapable of using the ‘is visible/is not visible’ exposed state, so I had to use code to bypass that limitation as well.

Curious why you wouldn’t just use a floating group with a custom state?

Could you explain why this wouldn’t work and why you explicitly need a focus group?

What I did at first must have been something similar to what you did. I placed a group behind everything that would be this “group focus,” and then when I open it, I run a script that puts it where I want it and with the “group focus” effect, but even so, I didn’t like the final result that much.

So I talked to the designer, and we came to the conclusion to put a group focus :rofl:.

He wanted to have that group focus, but he didn’t want it to close when clicked outside, and that was the reason for having a focus group: it had to stay in a specific position in a dynamic field within a repeater group.

The designer wanted to have a kind of group focus on this item, which is a reusable element with dynamic input within a repeater group, but when this group focus was open, I could continue clicking anywhere else outside of it and it wouldn’t close.

But in the end, we put the focus group in anyway and everything worked out fine haha.

I did not do that. I actually just made it so the groupfocus element itself would not hide when clicked outside. I did not add a group behind it to create a ‘group focus effect’. I just actually changed the behavior of the group focus element itself via code, which is why the ‘is visible/is not visible’ issue occurred in all of it’s child elements because to make the group focus remain open I had to adjust the visibility.

No matter which approach is taken to get the functionality, it is better if Bubble just added a simple checkbox like there is on the popup.

For sure, when Bubble adds this feature, it will be wonderful.

I tried the first option of creating a code to prevent the group focus from closing when clicking outside, but I couldn’t do it and didn’t want to spend so much time on it.

I don’t know how you did it, but what I tried was to have a script that kept an eye on the group focus if clicked outside when visible, and when the bubble changed the display to none and the visibility to hidden, I would revert it, but in the end I managed to leave the group focus as it was, hahaha. I hope Bubble adds this feature soon.

Basically that, which is why the child elements end up messed up for the ‘is visible/is not visible’. I think I had a code that watched for clicks outside, and when the groupfocus was open to force the code to change it’s visibility back to open. Definitely not the easiest to deal with because of all downstream headaches.

If I were to try again, I think it would just be easier to have code alter a group element to function like a groupfocus using some kind of ‘anchor’ for the group to sit under as well as altered z-index to make it seem to be ‘on top’.

In the end, everything has a way, but it doesn’t always work out the best way. The important thing is to find the best way and wait for Bubble to release this native function haha, thanks for your help and attention!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.