Skip to main content

Support "on click outside" or "blur"


Show first post

37 replies

ReneLopez
  • 34 replies
  • October 10, 2022

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


Dennis_N
  • Power Member
  • 181 replies
  • June 20, 2023

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


S_e_b_a_s_t_i_a_n

My vote on this for the next feature drop.


  • 31 replies
  • July 10, 2023

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


Scott_Clark

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!


Vincent_Schlothauer

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


Laura_Sujei_Vega_Magdaleno

same here, I also had the same problem


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings