Got this:
The problem is that the moment a user selects an option (i.e:bills) on mobile, the group focus closes. Anyone has a method for “locking” and “releasing” the group focus? Or has anyone played with positioning floating groups relative to an element and effectively creating their own group focus?
This seems to be a common problem with some elements on a group focus.
I have the same problem a group focus using Air Date/Time Picker. In my case, the group focus closes even in a desktop browser.
This may be something to request of Bubble.
EDIT: I hope I didn’t distract from your concern by mentioning Group Focus when you asked about Floating Group. They may or may not operate the same way. I simply assumed that they are equivalent but may not be.
I use #locked {display: block !important;} keeps it open but when page is resized it doesnt keep to target/reference element.
Where do you put that snippet?
You can use html element or place inside of your seo/metags (if paid account) make sure it’s inside of <style"> </style"> tags. I looked at the code for an open group focus and this is it.
I’ve not encountered that particular issue, but it seems solvable. Looks like you have a partial solution. If nothing else, a monkey patch using JS might be possible. If nobody comes up with a solution by the end of the week, I can take a closer look on the weekend.
In super short
@sudsy is the answer is to return e.stoppropagation on a specific element? Haven’t been able to figure out how.
In long:
Placing a focus group on the page adds this event to anything clickable:
The multiselect element has this instead:
But I can’t figure out which function is running and how to stop it… Any help appreciated.
@Taiheta I tried your solution, no dice 
That’s with the fg having a display:block !important…
@laurence if you want we can send in some bug reports because this is indeed not desired functionality. They may add a fix allowing us to put anything inside a focus group and add that stop propagation by default which would be desired functionality…
I had a quick look, and I’m wondering if your idea above might be the better option to pursue. You’d have explicit control over showing and hiding the group, so it should just be a matter of keeping the FG aligned with whatever element you choose.
The following (inside an HTML element) seems to work on my simple page…
<script>
$(function(){
var floater = $('#floating_group'),
align_to = $('#input_element');
floater.css('margin',0); // reset margins
$(window).on('resize', function(){
var position = align_to.offset();
floater.css({
left : position.left,
top : position.top + align_to.height()
});
});
$(window).resize(); // init position
});
</script>
The FG remains aligned to the bottom left corner of an input element. You might encounter some issues on a more complex page, but let us know if/how it works.
Thanks @sudsy always so helpful 
Where do I buy you that coke? To be honest I don’t feel like doing responsive-aware math to align the focus group as I’m on a bit of a deadline for this and have other things to focus on. I had attempted using this method to align a floating group a while back. Turned out sliding it all over to fit the screen to fit responsively was the sticking point. I can do it, but I’d need to dedicate some more time to it, and was frustrated because that’s what the Group Focus is meant for. Pretty core stuff IMHO.
@marca can you or someone else from the product team write us a quick JS or JQuery patch to stop bubbling (ha) of the hide event on any child of a group focus? I have submitted a bug report, but I’m not currently looking for an empirical or elegant fix just a quick one 
Thanks this is working. My placement is not as simple to bottom left, could you show me how to align (px) the floating group to the target like this:
Hmm, yeah, I figured there might be some responsive issues to sort out. While it doesn’t help you for your current project, perhaps the longer term solution would be a Group Focus option to handle show/hide automatically (as it is now) or through an exposed “is visible” property.
EDIT: In fact, a FG and GF are similar enough that it seems they could be combined into a single element with some configuration options related to alignment (relative to viewport or element) and visibility (auto or manual).
So it looks like the top of the FG is equal to the top of the target and its left side is 131 pixels to the left of the target, in which case you might try changing the floater.css() positioning call to…
floater.css({
left : position.left - 131,
top : position.top
});
No, you’d need to change the second floater.css() call - i.e. the one inside the “resize” callback. That’s what positions the floater. The first one (which you modified) simply resets the margins.
oops I tried that also, Is this still wrong? 
That looks right. The only other thing I did was set the Float vertically relative to setting of the FG to Nothing. If that doesn’t work, then it’s probably just not a robust enough solution, I’m sorry to say. 
Yep, agreed. As @duke.severn suggested, a bug report and/or feature request is your best option.
Alternatively, you can post to the freelancer forum to hire a developer to create a plug-in or implement a workable “fix”.
@seanhoots the answer from Bubble’s pre-support team and since @laurence requested a fix specifically from your plugin:
Do you know how to prevent event bubbling of the Focus group close event on your plugin?
@laurence it appears bubble won’t touch the issue because it’s a third party plugin. They may or may not fix their own native element (multiselect dropdown) which is breaking on mobile. I’ll check back here when they do.
Thanks, Duke.
I have a bunch of other things to focus on this week so I probably won’t get back to this for a while. I want some time to concentrate on trying a variety of elements in a variety of situations.
