Quick Question -- Is there a way to set a condition on focus?

Anyone know a way to set a condition on focus? I could use a text element, group, shape, etc.

Details: I’m showing an “x” after an input field and want the user to know that clicking the x will close/delete that row. Would like to update the look of the x when the user sets the focus on it by tabbing through the form since it’s a UX best practice to make clickable elements appear clickable.

Like this?


Similar but different.

I have workflows attached to the “x” so when a user clicks tab it’ll take them to the x after the input (just how Bubble works). As such, I’m looking to have the “x” change color when it’s in focus so that user’s know where the focus went and so they know the x is clickable.

If I can’t get it to work the way I envision, then I may just put the x’s in a separate RG (so user’s clicking tab won’t focus them) and have them conditionally set the way you’re doing it. Seems quite effective.

Thanks Gaby

Ah, when the X is focused… Ok, I changed it. I put another input behind the X so that you’re actually tabbing to that input. I added style conditions on the “hidden” input & the x when the hidden input is focused (of course, the input doesn’t really need a styling, it can just be the x). Made sure to give the X a background so it covers the blinking focus indicator since that’s not actually an input we want to use. Also made sure to cover the input’s width so that it’s not ever type-able.

That work?

3 Likes

Yes!

Creative solution. I like it. Thanks!

1 Like