Run workflow when input is clicked or focused

Is it possible? How?

What I want to achieve is that I want to display a small editor window when an input is clicked. The user will then be able to change formatting of text in the input from the popup editor.

The editor will be reused for several inputs, so I will also need to save the input number as a state so the editor will apply for the correct input.

2 Likes

You could have the editor in a reusable popup element and make it appear when the input is focused.

The problem is that there is no such event “Input is focused”. Also in the “Element is clicked” event, inputs are not available to choose. I am wondering why…

2 Likes

Currently I display a transparent shape on the top of the input and run a workflow when the shape is clicked and then hide it. But this is a workaround.

1 Like

Hey @philipp.ko :slight_smile: I think you could achieve this using three elements:

  1. Input
  2. Hidden Button (that’s transparent and not visible on page load, anywhere on the page)
  3. Group (the editor element, not visible on page load)

Then you could place a conditional statement on the Hidden Button which is “When Input A is focused” --> This element is visible. In the workflow you could have a “Do When Condition is True” event. “When Button is visible (every time)” --> “Show Group”. The User could then use the Editor, and manually close it using an X icon. Or, you could create other conditional statements/“Do When Condition is True” events that would hide that group once a different input is focused, for example.

7 Likes

Thank you, fayewatson! This seems to be somewhat simpler then what I am doing. However this is also a workaround. I will definitely try it, but I think I will also post a feature request for allowing Workflows when input is focused.

2 Likes

No problem! :slight_smile: Yes it’s definitely similar to what you were doing. One other thing I was thinking you could do is change the conditional statement on the Hidden Button to be “When Input is focused OR Group is hovered” --> This element is visible. That way the editor is visible when the input is focused or if the user then moves from the input to the editor. Then you could have another event in the workflow which is “When Button isn’t visible (every time)” --> Hide Group. That way the editor is shown/hidden depending upon what the User is doing.

This ended a 3 hour battle to do this, thanks Faye your posts help us all!

@Bubble in 2021 could we discuss this highly expected feature?

1 Like

Apparently not…

2 Likes

A somewhat hacky workaround I’ve used successfully in the past is that you can copy the ‘is focused’ expression from the conditional tab for your element and paste it into the 'When a condition…" workflow expression editor and it will work as expected.

I can’t say why this isn’t exposed natively in the editor, however its possible bubble may kill this, but it’s saved me countless dummy elements and the additional logic and workflows required for what should be a simple event trigger. I’ve used it and never looked back :wink:

12 Likes

what if you were to place all the input elements into a group element. Then every time that group element is clicked perform action? If I’m not wrong this can achieve the desired result.

I used this method to show info windows everytime an input is clicked

2 Likes

This right here is official documentation. Thank you!

2 Likes

up @bubble

Wow… This does work. I have been stumped with something so simple and had to resort to countless workarounds and “hacks” to use when trying to get workflow to trigger when an input is focused. This just saved me future time and workarouds. Something so easy and somewhat on the nose :joy:. Honestly this should be part of bubble’s conditionals or event triggers but isn’t. Hopefully it’s already being worked on.
Grazie

1 Like

Came by to add on a simpler workaround, works inside repeating groups too.

Simply put the input inside a group. Then just run the workflow on the parent group of the input. No need for recurring workflows or additional conditionals.