I need help with group focus and getting it to show consistently.
Right now I have an input and a group focus on the page to be used for a search feature.
It is simple enough to get the group focus to be shown when the inputs value is not empty.
And as the behavior is built in when a user clicks off the input value any where on page besides the group focus element, the group focus element will become hidden…which is great built in functionality.
However, the issue is that after a user clicks on page and “hides” the group focus and then they go back to the input element again to begin typing for a new search, the group focus is never “shown” again…seems like it is a negative consequence of them clicking on the page.
I have the workflow event set as shown above to be done “every time” but it doesn’t actually happen.
Anybody crack the code on this one?
All I want is for a user to be able to type in the input to perform a search which will have results displayed in the groupfocus and if the user clicks off and the group focus closes for the user to be able to type in the input element a new search or even continue typing ( ie: wrote one word of a two word phrase - clicked off - group focus closed - starts to type the second word ) for the group focus to be shown again
The idea I had was “when the input is focused” but that doesn’t show the groupfocus for more than a split second as it seems the idea of “input is focused” is not the entire time a user would be typing in it, and instead is just a split second when the first click into the element.
Thought you might be able to shed some light on the problem I am having…do you think this would be a bug, because when I “focus” on the input ( ie: click into the input ) the group focus only flashes on screen despite the fact that after I click on the input I begin typing in the same input.
I would like to show the group focus when the user is typing in the input element as the groupfocus will contain the search results.
When a user clicks off the input element and the groupfocus is automatically “hidden” I would like the user to be able to again ( without reloading the page ) start to type in the same input element and have the group focus be shown again.
Looks like I figured out a roundabout way to accomplish this.
ARGGHHHH this type of stuff really throws me through hoops.
put the input element into a group element - this will be used to reset the input element
use custom state on page ( or wherever you want ) for setting a yes/no to determine if the groupfocus is visible or not…also is going to enable you to change the value when a user clicks off the input element.
some other things to do…check out the editor on page “gfocus”
Hello @boston85719, your example still not working properly after unfocusing the input for the first time.
You need to create a custom state that becomes true every time the input is focused and becomes false every time the input is not focused. (ORANGE)
You need to add also a condition that detects when the custom state is true + 500ms to prevent injecting JS to a null element (takes like 300ms to element to become visible). (Here we inject JS). & a condition that will hide the focusing group injecting JS to hide. (PURPLE)
Last, a custom state that needed to run a one-time per load to prevent injecting JS to a null element. (CYAN)
@duke.severn that is pretty much what I came up with in native bubble as well except, your use of an invisible group overlay on the input to trigger the group focus to be seen ( which I like ).
I was setting it the groupfocus to be shown when the inputs value had two or more characters, but I like your approach to having some search results present before the user begins to type, which I will probably adopt.
Thanks for the help.
By the way…how did you make the diamond from the shape element?
I have no idea if it works on mobile or not. I believe the main issue I was trying to resolve, showing a group focus when an input is focused, had been resolved and following the link to the editor I shared brings you to a page where this set up is currently working.
There are two other pages that have other setups, albeit quite similar, to enable the group focus to show when an input is focused, but again I don’t know if they work on mobile or not.
I am not sure I guess there are certain ways to achieve functionality that aren’t good for both mobile and desktops, this being on of them.
I usually just change my approach to situation, not ideal, but it allows me to push through and not get bogged down on issues. I’ve wasted too much time on things like that and rather get a finished product and if capable paying somebody down the road to implement things I wasn’t able to.