Element Focused State (like Superhuman email)

I’m creating a to-do app and would like to default the focus on a task, so I can start creating keyboard shortcuts to delete, or move tasks to later days.

How can I…

  1. Always have a task focused.
  2. Set focus based on hover.

The email client superhuman achieves does it well.

Hey @marius , great question! So, there’s two aspects.

I’ve set up a demo here to show you how to do this. It does involve the use of a plugin, to circumvent some Bubble limitations.

  1. You need a custom state to track which is the “active task”. That’s simple, I’d suggest adding it on to your repeating group. On page load, set the value of the state to the repeating groups :first item (then set some conditional formatting on the task text field / group to show the highlighted background).

  2. The fun part. You want to update the value of the “active task” custom state on hover over the repeating group items. Two issues with this: a) Bubble does not have an “on hover” event in the workflows and b) the main page cannot access elements within a repeating group… So, I recently created a plugin to assist with this communication barrier and I realised it can also be used to make this scenario work too. You can see how I’ve done it in the demo, and you can check out the plugin here.

Let me know how you get on or if any questions.

Bests
Rob.

2 Likes

Just browsing forums, not even in need of this but I just want to seriously recognize @robhblake for the crazy detailed response and time put in to his answer.

People helping like this is why bubblers succeed and grow!

:clap::clap::clap:

1 Like

Thanks Chris! :smiley: Totally agree, Bubble has a great community of helpful folks.

Wow! thank you so much Rob! your solution was perfect and I was even able to get the shortcuts to work! Still can’t believe I was able to build this with no-code/Bubble!

(In the GIF below I’m using keyboard shortcuts to go up and down on tasks and then pressing h to change the date)

1 Like

That’s looking really slick, Marius! Glad it worked out :smiley:

This topic was automatically closed after 70 days. New replies are no longer allowed.