Should we merge this thread with this other one? “On click outside” trigger option - Interactive Components / Feedback - Figma Community Forum

+1 to this! Being able to have a component switch from Focused > Not Focused when you click outside somewhere would be awesome, especially for text boxes.

Yes please! This would be very helpful. Right now I’m using “Mouse Leave” but “Click Outside” would feel much more natural.

+1 Absolutely crucial when it comes to hi-fi prototyping.

My vote on this for the next feature drop.

@Figma_Support

Do you have any plans to implement this “on click outside” trigger option?

It would be invaluable in creating true to life prototypes.

I’ve wanted this many times- Figma, please do this.

So this is actually a simple fix.

If you have something like an expandable search field that you want to close when you click outside of it. You most likely have this component assigned to a variable. So do something Like this:

Component = String Var Name = (values) default, open

the component opens when you click on it.

Once you have things built. Just add a conditional statement to the screen as an On Click conditional statement that tells open things to close. So you basically just click in the negative space of the screen and anything that is open will change to it’s closed state. The close trigger is the frame. To you don’t add a close trigger to the component because you aren’t clicking on it.

If Component == “open”

• set component to “default”

Great! however I cannot use it. Say to upgrade the plan 😕

do you mind sharing a live example of this? I think it would be very helpful for those not so knowledgeable about this type of conditional logic. I know I would learn a lot from it. Thanks!

While this works on an individual component level, it’s still a huge pain to implement once you have more than one or two components that can be focused/unfocused or open/closed on the same screen.

Say you have a form with 10 inputs and dropdowns. Not only do you need to create a “focus: true/false” variable for each separate input, you also need to both create an on-click event that sets every single one of them to false when clicking in the empty space, and create the same on-click event for every component on screen, so that focusing the next input causes all other inputs to lose focus.

This seems like a very unwieldy workaround simply to avoid having a “click outside” trigger (which already exists for overlays).

same here, I also had the same problem