How would you create this interactive input field?

[bonjour_17]

Hello folks. Just wondering, how would you create this input field with advanced mouse interaction : see gif

• Create a task when pressed “Enter key” : no idea, how to do this?
  How do you create a thing just by pressing Enter from an input field. There does not exist workflow trigger on that action.

• When clicked anywhere outside the input field, hide the input field and reset to default state the group : no idea, how to do this?
  How would you do the workflow that hides the input when the user clicks anywhere outside of it?

Thank you

[code-escapee]

@bonjour_17

• Create a task when pressed “Enter key” : no idea, how to do this?
• When clicked anywhere outside the input field, hide the input field and reset to default state the group : no idea, how to do this?

When submitted add a task to the DB and make sure filters on task allow for it to be shown and it’s sorted by created/modified asc

click anywhere on group / page other than existing list and other buttons hide input group -warning - performance will likely be sub-par

[bonjour_17]

Hi, thanks for the answer.

1. Sorry, I was unclear in my first question.

• Create a task when pressed “Enter key” : no idea, how to do this?

→ what I don’t get is how pressing my Enter key, when the input is focused, creates a thing

2. Also, as for the second question, I don’t get it, how would you do the workflow that hides the input when the user clicks anywhere outside of it?

[code-escapee]

@bonjour_17

→ what I don’t get is how pressing my Enter key, when the input is focused, creates a thing

Submit input when "Enter" button is pressed from the keyboard

Create an element that can be clicked or use one that already exists and at the bottom of the editor for that element enter the HTML ID attribute of “enter”. You can make this element invisible through styling. Get the free plugin called “Toolbox”. Then on a “Page is loaded” workflow use the action “Run Javascript” and put the following code: $(window).keydown(function(e) { if (event.keyCode == 13) { if($('#enter').length){ $('#enter').click(); } } }…

or similar

@bonjour_17

Also, as for the second question, I don’t get it, how would you do the workflow that hides the input when the user clicks anywhere outside of it?

bunch of ways.

• I mentioned click anywhere on page above which I didnt explain but means make the entire page a group and in workflows do a whenever an element (page group) is clicked w/ a conditional and the input group is visible → hide input
• use a focus group
• rules on input itself when its not in focus
  and many others if you take a look around I’m sure you’ll find some better ones.

[bonjour_17]

Thanks

1. Thanks for reffering to this other post, this solution works

2. The first 2 possibilities can not realisicly be used in the product, and I don’t understand the last one.

• “monitor when the whole page is clicked” → technicaly works but not acceptable because my mouse cursor is now a hand anywhere on the page
• “use a focus group” → this can not be responsive so not acceptable
• “rules on the input itself” → rules are not checked in real time and can not trigger stuff. I might not understand this option, or it might not work at all

Would you mind rephrase the last possibility?
Thanks

[bonjour_17]

It seems crazy to have to do this but… this thread mentions a trick to solve this.

Really sometime Bubble is like a DIY school project

"is focused" option not showing; was this removed?

…or am I doing it wrong? I’m trying to trigger a workflow when an input is focused or isn’t focused, which according to this thread I should see in the “Do When Condition is True” workflow type: However, when I try that in my app, this is what I see: [image] Any ideas why I’m not seeing the “is focused” option? Thanks!