Support "on click outside" or "blur"

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.

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.

Hello,
I think it could be great to have the possibility to change the variant of a component by just clicking outside of it.
It could be used to simulate the behavior of editing softwares when the user wants to deselect a selected items by just clicking somewhere else.

Maybe there’s an existing solution for this that I missed ?

Yeah I’d like this too. For example, on a text field component, transitioning from an unfocused state to a focused state works as expected. But if I want to transition back, IRL this done by either selecting a different field, or by clicking outside the field. Current Interactive Components doesn’t account for this.

I really like that too 😃

Yes! +1

I’d love to have a trigger called “on click out” or “lost focus”, to make a focus input state go back to its initial state, instead of using the option “on mouse leave” since it’s not the default behavior in browsers.

There is a bad workaround that is placing an overlay and clicking “close when clicking outside”, but it doesn’t work within the same component set and also doesn’t keep an user action (like a triggered checkbox will always be reset when clicking out).

This would be very useful!

@Adam_Przewoski Is there a way to upload this to the design library? I cant seem to figure that part out. When I prototype this strait in my design library it works, but when I do it on my company’s main page it doesnt work.

I’ve built a bit of a work around for click outside by using a large hidden frame around the component that triggers the un-focused state on mouse down and then use on mouse up to trigger the focus state of the next component, since that seems to follow the order. But z-stacking does get in the way of that and it doesn’t work well with nested items that all need to change on click outside.

It’s really interesting to me which actions allow the same action to trigger multiple component interactions, and which ones don’t. (This is definitely related to this other post I made: Pass through click, mouse down, mouse up, and keypress reactions (overlapping interactive components) )