Figma Support Forum

Support for "click outside" or "blur" action to avoid Interactive Components getting stuck in focused state

Immediately sticking out for me is the absence of a “blur” interaction. This is necessary to simulate “focused” states in things like drop-downs and text inputs.

Without this, my components get stuck in the focused state without an elegant solution for having them blur like they do on the web.

My current workaround is to use the “mouse leave” action, but this is suboptimal.

I imagine you could add a trigger called “Click Outside” or something similar.

Besides this, the feature is a golden so far :slight_smile: You folks are killing it!

7 Likes

I ran into the same problem just recently. Your “mouse leave” workaround seems like a great idea and I feel like this is something I’ll be using for now, but looking at the bigger picture my overall concern is how do I simulate the experience of typing something into a text input, in general?

Let’s say I have 2 frames in Figma: the first one containing a blank input and a second one with a filled input. At the same time, the text input I’m using is an interactive component that changes its state to “Active” upon clicking.

Now, how do I go from the first frame to the second one? If I click on the input component it will just change its state to “Active”. If, instead, I’d like to go to the second frame (with a filled input) upon clicking, then how do I show the “Active” state in my prototype? :thinking:

I’d love to be able to do that too. Though wonder if “stateful” components are in the long term vision of Figma at all. As a workaround, if you know the first character your user is supposed to type, you can use the “key/gamepad” trigger using the first character. It would be especially useful if they added an “any key” option, as that would be easier to maintain.

1 Like

Agreed on the “Click outside” suggestion. The mouse leave workaround works, but with larger forms is causing more trouble complications the more I use it…

And also agreed on the feature being overall awesome :+1: :slight_smile:

1 Like

Hey there,
Adam’s proposal of using “mouse leave” is a great start to simulate the experience. But wanted to share a bit more context;

The main goal of interactive components is to introduce the concepts of encapsulation and reusability. But at the moment it’s restricted to interactions being only ‘internally’. So it’s not (except for creating two separate frames) to use interactive components to trigger changes in other objects. A ‘click outside’ is a version of that problem.

It’s definitely something we’re thinking about, but we hope that interactive components is already useful on its own, so we couldn’t wait to get it out.

<3

6 Likes

Hi @nikolasklein. Thanks for responding!

Though I of course, don’t have any insight into your interactions architecture, I don’t see “click outside” as any different in nature from “mouse leave.” The interaction would not have any knowledge of anything outside of the component, except that the click happened outside of the frame. It would still practically be encapsulated, at least from a least-knowledge perspective.

On the web and elsewhere, you can listen to a “blur” or “unfocus” event without knowing anything about the UI. It is used all the time inside Vue/React/Svelte/etc. components.

I think this is a bit of an omission in that it is absolutely necessary to properly simulate dropdowns, popovers, and all manner of focusable inputs. Your demo examples even show dropdowns closing when the mouse leaves. That’s not how that works in real life and could cause undue frustration during user testing.

All that said, I have an acceptable workaround, so I’m patient and I’m happy to have this feature at all :slight_smile:

4 Likes

Thanks for the insight into your thinking with interactive components @nikolasklein :slight_smile:

Agree with you and appreciate what you guys have done - it’s awesome that this is out sooner rather than later, and it does let us do/create so much that we couldn’t before already. I’d love to be able to connect component A to component B and link state changes, but I appreciate what you’re going for with the current release and I’m not expecting that one (but please, feel free to surprise me, it is my birthday in a few days :D).

I also agree with “click outside” as @Eli_Crow suggests it, and see it not as a “but” on all your good work, it’s an “and” :slight_smile: I am :crossed_fingers: that a “click outside” interaction could be in reach sooner than connecting components, as it is a purely internal to the component and unlocks a lot of value.

tl;dr :+1: for “Click outside” as an interaction :smiley:

3 Likes

I’ve just realized — the concept of “clicking outside” isn’t new to Figma. It’s already available when working with Overlays.

Using this approach, I was able to create another hacky workaround for having a “blur” behavior. Although it’s way more tedious than Eli’s “mouse leave” solution, I believe it’s more accurate in simulating an actual implementation.

PS. In fact, it’s so hacky it even hacked Figma’s page counter in the prototype mode. :joy:

2 Likes

Nice job finding another workaround. I’ll put that in the ol’ tool belt!

Nice @Adam_Przewoski I was thinking along the same lines this morning, tried created a 2000x2000 1% opaque rectangle in the focused states and put a click action against it to create the blur event. I wanted it to just be part of the component ie. I didn’t have to do any further linking or handling outside dropping the component into a design. Dropped it when I found that just creates multiple layers of overlays if other form fields are higher in the z-order :frowning_face: Your way avoids that, but doesn’t keep any text overrides? (hmm, and also would require an overlay per field to align the location?)

EDIT: Had some more playing/trying, and I’m thinking that this is all a bit too hacky and I’m just going to live with multiple focuses (focusii?) for now :stuck_out_tongue:

1 Like

I completely agree with the wish for a “click outside” - I just stumbled about the same problem while trying to prototype a focus state.

I was also thinking that a “while focussed” similar to “while hovering” or “while pressed” would be really deluxe on top of the “click outside”. though its problably just another name for the same Idea…

2 Likes

Currently, Interactions work by defining an activation behavior and the subsequent action that the component should take.

For example, you can set a component to catch your Tap, your Hover, Mouse Enter, etc etc, and then perform some sort of animation or reaction as a result.

While designing some interactive inputs, I realized a gap: Tap Outside is not a registered interaction. In essence, I would like to set my component to perform some actions when a user taps inside of them AND outside of them.

Example scenario:

  • On Tap: My component gets a blue stroke around it and a blue glow.
  • On Tap Outside: My component loses the blue stroke and blue glow.

This would help to bring to life components which represent interactive objects like components, buttons, and largely other forms…but only when a tap is registered outside the component. A mouse exit simply won’t do.

1 Like

Just enhancing what @Ryan_Ford wrote. I need to be able to have the “same click” do 2 different things.

  1. select the current
  2. open a details pane (open as overlay…)

I thought that defining 2 actions Inside and Outside will do that, but it didn’t. Readin this thread I understand why.