Support "on click outside" or "blur"

I really like that too :smiley:

Yes! +1

1 Like

This would be very useful!

Is there anything like this? However I found a good alternative option is “Mouse leave” instead of “Click”

1 Like

Big +1 from me. I’m running into an issue with a prototype I’m building now and “tap outside” would help.

It would also be nice if we could be more explicit, with “tap other instance”, where a user tapping a different instance of the same component would trigger something, because it’s not so much that someone tapped anything else that I care about, but that somebody specifically tapped another of the same component.

2 Likes

+1
Yes please! Prototyping complex software would be so much easier. And I am not forced to switch the Software for implementing things like “when clicking this, change other component variant to that”.

1 Like

This in combination with variants can allow us to make an accordion that automatically collapses all other list items except for the one clicked on - having to make the same number of copies as the number of list items is just very time-consuming

+1 to this

+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.

@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.

1 Like

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 :confused:

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).

1 Like

same here, I also had the same problem