Add "do not close when clicked outside" option to groupfocus, similar to popups

Idea
1

The groupfocus should really have a way to disable the behavior that is automatically closes if it is clicked outside. A similar functionality exists for popups, in the form of the “This popup can’t be closed by pressing ‘Esc’” option.

Example for usage:

This is a continuation of the example in the following post:

I want to create an input with a dropdown menu for a user to choose from a list of dynamic types, or type their own. Since I cannot do this with the standard searchbox, the next best option is to create a Groupfocus to serve as the dropdown. In order to get the groupfocus to show when the correct input is focused and hide otherwise, two workflows are used:

-Do when a condition is true → Every time → Input type is focused*: Show groupfocus dropdown
-Do when a condition is true → Every time → Input type is not focused*: Hide groupfocus dropdown

Unfortunately, this causes a problem with the groupfocus: the focus on the element is triggered on mousedown, which causes the groupfocus to show. HOWEVER, the groupfocus’ built-in check for losing its focus happens on mouseup, which detects that the input is in focus and not the groupfocus, causing it to close. The result of this is that clicking on the input causes the groupfocus to flash briefly before remaining closed. You can get it to stay if you use the ‘tab’ key to switch focus to the input, but clicking on the input again causes the groupfocus to hide.

The next step was to attempt to use a floating group to serve the same purpose. While you can’t anchor a floating group to an element, it could still work, and avoids the previous issue. One problem though: the input form is in a popup, and floating groups can’t be put in popups. While they can still be shown and hidden, they appear underneath the popup.

This could all be avoided by giving us the option to disable the hide-on-lose-focus behavior. Or at least allow floating groups to be shown in popups. It looks like people have been asking for that one for at least a couple of years now:

*A side note: “input type is focused” is not a valid workflow condition in bubble (though it really should be). As a proxy, I create a transparent group that is hidden by default, and have a condition on the group that says “When input type is focused, this group is visible”. I then use the group’s visibility as the workflow condition.

Credit to Run workflow when input is clicked or focused - #5 by fayewatson for this solution

8 Likes
2

By the way, for anyone stumbling across this with a similar problem, here’s how I generally accomplished this:

  1. Use a normal group instead of a floating group/group focus. Make sure you hit “Bring to Front”
  2. Create a repeating group of type text within the above group
  3. Put input type in its own group (group type).
  4. For each of the repeating group’s cells, add a clickable element. Set the workflow of this element to be: “set state SELECTED of input type = current cell’s text -> reset group type”
  5. Set input type’s “initial content” to input type’s SELECTED
  6. Set up the above workflows to show or hide the group, with the following addition. For the condition for the invisible group, make it “When input group is focused OR repeating group text is pressed, this group is visible”. This will prevent the hide event from firing before the input can be reset properly when you click a repeating group cell.

Hope this helps. The only limitation I know of to this is that you can’t have the group go out of the bounds of the popup. This whole thing definitely took way too long for something that should be simple, so I really hope bubble adds these features.

1 Like
3

Please add this feature (do not close when clicked outside) to GroupFocus

It’s the only way to make floating group sidebars that are fixed to the center of the page when resizing the screen.

4 Likes
4

After several hours trying to solve this, I’ve found a way!

First, to be clear, I really needed a Focus Group as I want to “show” a floating element on the page that comes from an Reusable Group (Header) that is present on all pages of the application. I will use this as a persistent location to update data thru out the application. A “Group” or “Floating Group” would sort of work, but the Header reusable element gets over the page and it is a mess.

I’ve made several different approaches, tried workflows, javascript, debugged Bubble.io code and nohting worked. The trigger that is installed on all other objects is simply too difficult to remove or prevent. Then I had a new idea came about. What if we don’t care about that trigger and tell the browser to simply ignore it? Since the display block/hidden is a CSS style, this could be as easy as changing the ID of the elements.

So the solution for me was:

  1. create an variable at the reusable element that has the status of visibility desired (show_panel), it starts as “no”
  2. on the element set it’s “ID” as a “element_always_hidden”
  3. on the same element, add a condition that when “show_panel” is yes, set “Element ID” to “element_always_visible”.
  4. on Application settings SEO/MetaTags, add the following CSS:
<style>
    #element_always_hidden {
        display: none !important;        
    }
    
    #element_always_visible {
        display: block !important;
    }
</style>
  1. Because all focus group are not loaded by default, we must “load”, for that we must specifically “show” the element. On Workflow Load Page show Focus Group

How does it work? Iif the variable “show_panel” is “no”, then the condition is false sets the element back to “element_always_hidden”. If the variable is “yes”, then the condition is true and sets the element to “element_always_visible”.

On page load it will never shows up because of the CSS that forces it to be hidden (default ID)

All the triggers are set through out the page, but we don’t care… any event will be unefective because of the CSS.

To control the focus group, just flip the “show_panel” variable “yes” and “no”.

1 Like
6

@racribeiro ,

Your snippet of code and method does seem to prevent the Group Focus from being dismissed, which is awesome - however, it seems that once I click anywhere on the page, the Group Focus becomes locked to its position in the browser window, thereby forfeiting its anchor point to the original element it was attached to. :frowning:

This, of course, doesn’t make the solution quite useable yet, as the element then becomes contextually lost on the page.

Do you have any solutions or ideas for how to solve this problem, such that we can still avoid dismissing the Group Focus, while also letting it retain its original reference element & offsets when the mouse is clicked elsewhere?

Thanks!

8

Yes! Any way to play around with the groupfocus being open or close to define a condition?

I’d like to simply close “fa-close” and display “fa-navicon” when the groupfocus closes by clicking outside that gf without clicking on “fa-close”.

It’s details by trying to figure out some trick here too.

9

That’s just for popups, not for group focus (which is the context of this post).

10

Bumping this to see if anyone has come across a viable solution? Seems silly that we can’t have an input like a searchbox work within a group focus element without the UX breaking.

BTW for now I am doing a hack around workflow that says when Searchbox X’s Value is not empty (input that is causing group focus to close), show Groupfocus.

This works okay, it obviously has a half second where the group closes and reopens, but it is the best I could come up with for now! Hope this helps someone until we get that feature.

1 Like
11

@emmanuel Bumping this - would be great to have this feature! Summary: for the GroupFocus container, we want to have the option to prevent it from closing if someone clicks outside of it. Similar to the “This popup can’t be closed by pressing ‘Esc’” option.

Thank you!

1 Like
12

Please upvote the idea here

1 Like