Why does GroupFocus close when clicked outside of it

boston85719 · 2024-08-03T16:44:32.650Z

Is there any technical reason why the group focus element will close automatically when the user clicks outside of it? I’m curious if there is something inherent to a group focus element from a traditional coding perspective that makes them always close when clicked outside of it, or is that just something that Bubble implemented?

It is one of the most annoying things about using them and causes us to need to use so many hacky workarounds to keep them open when they need to be.

jonah.deleseleuc · 2024-08-03T16:57:50.749Z

To me, a group focus closing when clicked outside of it is pretty logical. However, when you think about it, a group focus and a floating group is actually the same thing except for that a group focus “hugs” to a reference element and a floating group doesn’t.

My suggestion to bubble is to get rid of group focus all together. Keep floating group and add a checkbox called “float to a reference element group” or something like that. If it’s checked, they can expose another checkbox “close when clicked outside of it”.

To answer your question precisely, there’s no coding reason. They’re both elements with position:fixed or position:absolute, that’s all it is.

I wonder if I created a plugin called “Better Floating group” that did just that, would people use it?

Let me know

boston85719 · 2024-08-03T17:07:38.032Z

jonah.deleseleuc:

My suggestion to bubble is to get rid of group focus all together. Keep floating group and add a checkbox called “float to a reference element group” or something like that. If it’s checked, they can expose another checkbox “close when clicked outside of it”.

That is a good idea. I just added to idea board to add checkbox to groupfoucs to not hide when clicked outside.

If there was a combination element as you suggest, that would be best.

jonah.deleseleuc:

I wonder if I created a plugin called “Better Floating group” that did just that, would people use it?

Probably, especially as the group focus that is used for sub menus can only offset top and left (obviously can do things like negatives to go off bottom or right) but to be center aligned with its reference element, which may have a design that it’s width or position changes, and make it such that the groupfocus element will be able to have the width equal to the reference element.

I currently have to do these things with custom css or javascript and it is a pain.

BTW, any idea if there is any custom css that can stop the groupfocus from closing? I saw another thread with a suggestion that doesn’t work.

boston85719 · 2024-08-03T17:16:15.023Z

I think I figured out a piece of it

<style>
    #element_always_visible {
        visibility: visible !important;
        display: initial !important;
    }
</style>

This works so long as the page width doesn’t change as the groupfocus will remain open, but it does not track the reference element as the reference element moves with the page width changes.

EDIT

This works so far as the page width doesn’t change quickly. The group focus will remain open and doesn’t close when clicked outside and tracks the reference element as the position shifts

<style>
    #element_always_visible {
        visibility: visible !important;
        display: flex !important;
    }
</style>

One caveat to this is that the Bubble internal ‘is visible’ doesn’t work with it…what this means, is that when the custom CSS is applied and the groupfocus remains visible to the user on the screen, Bubble still interprets it as ‘invisible’ (can check debugger to confirm) which means any conditionals that reference the group focus is visible or is not visible will not work. To account for that, simply create a custom state that I call ‘is shown’ and use that instead of built in Bubble is visible/is not visible.

jonah.deleseleuc · 2024-08-03T18:29:22.596Z

Personally, I don’t suggest using custom CSS if you don’t know CSS like the back of your hand. That’s because if it’s stops working, it’ll take you forever to figure out to fix it. I worked on projects where all I did was CSS the entire time, but even me I try to avoid it of possible.

Alright, well if people are down for a plugin like that I would make it

boston85719 · 2024-08-04T06:02:08.323Z

jonah.deleseleuc:

I don’t suggest using custom CSS if you don’t know CSS like the back of your hand

For sure people shouldn’t be implementing it if they can not understand the basics of what it does or how it is setup. For me personally, I don’t know it like the back of my hand, so the only times I implement it is when I need to work around Bubble limitations and there is a backup plan to just use the limited bubble native approach.

For this particular case, I’m keeping in the app the setup to keep the group focus visible via native Bubble features, which requires custom states and conditional workflow triggers and results in a bit of a visual ‘glitch’ when the group focus closes normally and the conditional trigger shows it again. Keeping this in place and then adding in the custom css, in case the custom css doesn’t work as hoped.

jonah.deleseleuc:

Alright, well if people are down for a plugin like that I would make it

I’m looking forward to it. I’m sure a lot of others will be excited to utilize it as well.

ihsanzainal84 · 2024-08-04T11:07:02.789Z

I now use draggable groups nested in a floating group to replace pop ups, draggable menus and floating groups. A little bit of Javascript and/or CSS and i have complete control over my context menus and windows.

Edit: i meant replace groupfocus, not floating groups.

boston85719 · 2024-08-04T11:11:33.916Z

ihsanzainal84:

I now use draggable groups

Is this simply to be able to drag them? Or does the javascript and/or CSS you use require them to be draggable. I ask because if I’m not interested in a draggable function, can the elements be just regular groups and not draggable groups.

ihsanzainal84 · 2024-08-04T12:26:28.274Z

Yes you can use regular groups.

boston85719 · 2024-08-16T07:55:54.559Z

I was having issues with the action to set focus on input when I use this code to keep the groupfocus always open. The HTML for keeping groupfocus open causes a problem with the set focus on input.

The below javascript works

const input = document.getElementById('YOUR_INPUT_ID_GOES_HERE'); input.select();

Screen Shot 2024-08-16 at 2.53.32 PM

ken1 · 2024-08-16T20:29:09.633Z

For me, it’s perfectly logical for the group focus to close when clicking outside of it.

But, there is a problem when debugging. If I try to run the debugger in step-by-step mode, as soon as I click “step-by-step” the group focus closes! It is impossible to troubleshoot with a group focus if I want to examine variables and workflow steps. I cannot interact with the elements in the group focus.

boston85719 · 2024-09-14T15:59:53.689Z

When using this approach, there are issues with visibility of other elements. Looking at the inspector, bubble shows them as not visible, since bubble code has the groupfocus as not visible, but due to the custom css the groupfocus is still visible (ie: open).

In order to account for this, on some elements I need to use the below css

visibility: collapse !important;

In order to have elements hide/show as I want (conditionally). For whatever reason, it works best to make it so the element is visible on page load, has collapse when hidden checked and to conditionally change the ID attribute so the above CSS will apply to the element to make it not visible. Conditional is based on when you want the element not visible.

lasse · 2025-03-09T15:51:55.888Z

boston85719:

I just added to idea board to add checkbox to groupfoucs to not hide when clicked outside.

@boston85719 Can you provide a link to this so I can upvote it? I’ve suggested this addition as well in some other context as I keep running into issues and limitations with the current GroupFocus.

Fair enough that Bubble implemented just the basics back in the days, but it’s about time it gets an update with at least:

A dynamic option to set “Close when clicking outside” (it’s currently impossible to have GroupFocus A with GroupFocus B inside, as A will close when the user clicks anything in B).
An option to choose whether the GroupFocus should float to the left or right of it’s reference element – it’s currently only possible to make it float to the left by giving it a negative “Offset left” value, but that then requires the GroupFocus to have a fixed width and is in general just not very flexible.
Nice to have: A way to set a primary floating direction, but then flip to a different direction if there isn’t room enough for the primary one (similar to how flip | Floating UI does it).

lasse · 2025-03-09T21:11:43.538Z

Also, unfortunately none of these solutions work for me as the value of “display” messes up the layout of my GroupFocus. Have also tried other values, but none seem to keep my layout the way it is.

And completely removing the display line makes the “visibility” line not work, though you would think it’s that one that does the trick. I guess I need to find a workaround for the workaround!

boston85719 · 2025-03-10T05:01:17.503Z

Bubble

Suggest a Feature on the Bubble Ideaboard

Do you have an idea about how we can make Bubble better? Submit a feature idea for the Bubble product team, or browse and upvote others' ideas.

lasse:

A dynamic option to set “Close when clicking outside” (it’s currently impossible to have GroupFocus A with GroupFocus B inside, as A will close when the user clicks anything in B).

Yes in the default settings, but we can achieve with custom code or plugin

lasse:

An option to choose whether the GroupFocus should float to the left or right of it’s reference element – it’s currently only possible to make it float to the left by giving it a negative “Offset left” value, but that then requires the GroupFocus to have a fixed width and is in general just not very flexible.

This can be achieved with dynamic widths of a groupfocus element using custom code or a plugin…the offset left versus right I do not think is possible because it is just a javascript thing in which only top and left are necessary as right and bottom are just negatives of the others.

The code below is what ChatGPT spits out to offset right…notice the use of offsetleft in the code…that is not a chatGPT error that is just how the javascript works I believe.

function positionElementRight(targetSelector, elementSelector, xOffset = 10, yOffset = 0) {
    const target = document.querySelector(targetSelector);
    const element = document.querySelector(elementSelector);

    if (!target || !element) return;

    // Get target element position
    const rect = target.getBoundingClientRect();

    // Position element to the right of the target
    element.style.position = "absolute";
    element.style.left = `${rect.right + window.scrollX + xOffset}px`;
    element.style.top = `${rect.top + window.scrollY + yOffset}px`;
}

// Example usage: Position `.tooltip` to the right of `.box`
positionElementRight('.box', '.tooltip', 15, 0);

lasse:

Nice to have: A way to set a primary floating direction, but then flip to a different direction if there isn’t room enough for the primary one (similar to how flip | Floating UI does it).

I have a plugin element that does it…the plugin is not worth the $30/month just for that one feature, but we can achieve it with plugin or custom code…much easier with a plugin as using the custom code inside Bubble directly requires too much of bubble workflows to achieve that the delay is a bit frustrating.

Even when using the plugin though, when doing it in a nested repeating group (ie RG 1 has RG 2 which RG 2 has the reusable group focus menu)…it works mostly, but when the user starts scrolling both the page and the RG 1 at the same time, the position of the group focus can be off a bit, but it works very well in single RG structure.

lasse:

Also, unfortunately none of these solutions work for me as the value of “display” messes up the layout of my GroupFocus. Have also tried other values, but none seem to keep my layout the way it is.

I don’t know why unless you are not using Bubble flexbox responsive system and your still on the original legacy responsive.

lasse:

And completely removing the display line makes the “visibility” line not work, though you would think it’s that one that does the trick. I guess I need to find a workaround for the workaround!

There are a lot of quirks to overcome with this…since the visibility is what Bubble uses and this custom setting doesn’t override it for Bubble, Bubble will show visible as no while it is actual on page and visible due to the custom code for the workaround…this has lots of knock on effects, and likely not worth the trouble for many to have to figure out, and all of which require custom code to resolve.

So…it is about time Bubble did something, but don’t hold your breath as it likely will not ever…seems like most of the platform is left forgotten in the woods while Bubble is off searching for the AI and Mobile features.

lasse · 2025-03-10T08:52:38.841Z

Thanks for taking the time to write this. I’ll have to test out the custom left/right floating solution.

boston85719:

I don’t know why unless you are not using Bubble flexbox responsive system and your still on the original legacy responsive.

Screenshot 2025-03-10 at 09.07.30654×690 30.1 KB

I am indeed using Bubble’s native responsive system (in general I’m always trying to use as much vanilla Bubble as possible). In my case I have a multi-level layout of the GroupFocus, where if the user for example clicks the “Add to folder” option, it animates to a new view inside that same GroupFocus with further options. For that I’m using the “Align to parent” layout at the root of the GF, which also helps position an X in the top right corner that stays put regardless of what view the user is currently at inside the GF. My current issue is that the X then jumps to the lower right corner as soon as I introduce any custom CSS “display” setting.

I could probably find a workaround to that or try to restructure the layout of the GF, but we’re still back to the issue of one workaround leading to new issues elsewhere and I’m introducing inconsistencies across my different versions of GFs.

boston85719:

So…it is about time Bubble did something, but don’t hold your breath as it likely will not ever…seems like most of the platform is left forgotten in the woods while Bubble is off searching for the AI and Mobile features.

After +3 years on Bubble, sadly I agree.

boston85719 · 2025-03-11T05:19:11.751Z

lasse:

For that I’m using the “Align to parent” layout at the root of the GF, which also helps position an X in the top right corner that stays put regardless of what view the user is currently at inside the GF.

I very rarely use align to parent as a main content layout, usually it is column or row. I use align to parent mostly on containers that are child elements of the main container. As such most all of my groupfocus elements are column. I put the close icon at the top, do the alignment on that icon to be right and I add padding to the left and right of the groupfocus for the spacing of all elements inside. I have not had any issues with my groupfocus design/alignment changing with the use of the custom css.

But of course, as you’ve seen it introduces a lot of other issues, and so might not be the best approach to use and may find more benefit from using custom code on a group to make it act as a groupfocus in terms of offset from a target element.

lasse · 2025-03-11T07:16:59.380Z

I mainly use column and row layouts too, it’s only when I need to animate between two sections inside the GF I have the GF itself be “Align to parent”, and then each of its child sections will be column layouts. If I don’t use “Align to parent”, the height of the GF will increase to double size during the animated transition because the two sections are briefly present at the same time, which looks odd.

It might sound like a small thing, which in isolation it is, but overall Bubble doesn’t really offer a lot of options when it comes to adding delight to your app. So I’m jumping through hoops to add the bare minimum.