Show Group Focus on Input

[boston85719]

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.

Any help or ideas would be appreciated.

[boston85719]

Bubble Editor - Scrollbars

This is the editor to show a basic example I can’t get to work as I intend…page is “groupfocus_input”

[boston85719]

@yusaney1 I saw your reply in this thread

Bubble confuses "focused" with "pressed"

That’s exactly how focused works. Focused: your “keyboard” is writing on that input. As soon as you change to another input focused ends. Pressed: when you click on the input and release the click. PS. Can you show me screen of the condition

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.

[yusaney1]

You want to show the group focus while the input is focused + writing? Explain to me how it should work and will let you know if it’s possible.

[boston85719]

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.

[boston85719]

Looks like I figured out a roundabout way to accomplish this.

ARGGHHHH this type of stuff really throws me through hoops.

1. put the input element into a group element - this will be used to reset the input element
2. 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”

Bubble Editor - Scrollbars

[yusaney1]

Hello @boston85719, your example still not working properly after unfocusing the input for the first time.

I have tried many ways to accomplish what you trying to do but the only way that I found was possible injecting javascript into the element to edit a .css property (the one that controls when it’s visible and when not).

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)

Editor: https://bubble.io/page?name=index&id=inputfc&tab=tabs-1

[boston85719]

Thanks for the help on that. I appreciate showing the javascript…the plugin I have for JS doesn’t work.

Which plugin are you using to run the javascript workflows?

What I am using doesn’t give the option to check a box for a repeat

[yusaney1]

I used Components plugin, however, every time the condition turns true, the workflow runs javascript again.

Redu.

[duke.severn]

@boston85719 native bubble, my take on it. Not ideal but pretty close:

Bubble Editor - Duke-ssandbox

[boston85719]

@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 tried to recreate but just get a square still

[laurence]

@boston85719

Did you ever get this to work as you needed?

For my purposes, even more important:
does your solution work on a phone browser?

I’m trying to get a search with Group Focus containing a Repeating Group for user to select a single result from the search. It simply doesn’t work on a phone browser.

How to make a Search "Dropdown" work on a phone?

I created a reusable element that combines an Input, Search & Autocorrect, and Group Focus containing a Repeating Group, for the purpose of allowing the user to select from a short list identified by the Input and Search & Autocorrect. [image] When used in a computer browser, the reusable element works pretty much as expected. [image] However, when used on a phone (iPhone), touching in the Input element to open up the keyboard causes the search results Group Focus (containing the search resu…

[boston85719]

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.

[laurence]

Thanks. I have much to learn, but i’m getting a strong impression that Bubble (maybe web apps in general) don’t easily support good UI on touch devices, especially phones.

But …
I still have much to learn.

[boston85719]

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.

[julian_digitalsilva]

I got this working by:

1.) Installing the Toolbox plugin (javascript tools)
2.) Adding “Run javascript” action in workflow.
3.) Adding "document.getElementById(“myText”).focus(); " to the javascript.

[boston85719]

Could you show a screen shot of how that looks in the workflow action with the javascript code entered in the run javascript event?

[julian_digitalsilva]

Also, you need to have the ID of the html element you want to focus on set too and use that in the js.

Enable the application setting to allow you to set the ID of the html element:

[boston85719]

Thank you. This will be helpful for creating ‘helper text’ when a user is inputting data.

[mazorshimon]

This example really helped me in a build, thank you so much @duke.severn!