Skip to main content

So, I’m using some variables in my component. Here is the intended interaction:


In the table header, when you hover over the label, I want to show the sort and menu icons. (This is working via the mouse enter interaction setting the "X Column / Hover Active variable to true - it is false by default.)


When you stop hovering, the sort and the menu icon should go away. (This is not working with the mouse leave interaction. The hover state simply stays applied. I also tried setting the “Hover Active” variable (which is linked to visibility of the icons) to true while hovering, but that didn’t show the icons on hover at all.)


I am simply struggling with getting the icons to hide when the mouse leaves the area.


Why am I doing it like this instead of using a component to change the states. Well, I was. Except for the fact that variables do not work with nested states at the moment, so I had to break apart my components and get creative.


When you click on the menu icon, it sets a variable, “Active Column” - which is a string. It essentially just records the name of the column you clicked on.


If I click on PO #'s menu, Active Column’s value becomes “PO #”


This is used later when you click on “Filter” - this switches the overlay to the Column Filtering Overlay. There is a text field that is linked / populated by “Active Column.” It is intended to work exactly like Material UI’s column filtering on their X Data Grid.


So, when the filter column is opened, the text in the first field should be something like:


PO # contains _____________ ← which is a text input that allows them to search. So this is why I’m using variables for the hover state.


I created a demo with the gist. The first couple of columns work, I didn’t want to spend time recreating the entire file. (Can’t share source due to company policy.)


Here’s the Demo

This happens to me too, with mouse enter / leave. I submitted it as a defect… maybe that’ll fix it.

I am also experiencing this issue with triggering a hover state for radio buttons. Only the first or last item will execute the mouse enter/leave properly. The rest get stuck on mouse enter and do not execute mouse leave. Alternatively, using hover instead of mouse enter/leave doesn’t work at all.

Same issue here. Happened on a component that was previously working just fine. Now stuck on Mouse Enter state 🤯

Similar situation here. One Component with Mouseenter and Mouseleave for hover effects + variable setting, and several instances across 10 frames. Mouseleave works flawlessly on the instances on the first 9 fames, and not at all on the 10th frame.

Same when using mouse enter and leave at the same time.

It is such heavy and complex interaction, no wonder it unpredictably gets wonky

This “hack” doesn’t scale well, but if you put the mouse enters change on the child components you want to have trigger the set variable calls and then put a mouse enter interaction on a parent component (that visually encompasses the child component), you can get this to work. But the parent component needs to have a set variable call for each variable you want to reset every time the mouse “leaves” the child component and “enters” the parent component.


Don’t mouse around too fast or this will also not work and you get components stuck in the “triggered” state.

cant wrap my head around your “hack”


if you put the mouse enters change on the child components you want to have trigger the set variable calls


and then

put a mouse enter interaction on a parent component (that visually encompasses the child component), you can get this to work


so both, child and parent have onMouseEnter triggers…

Yes, I think you have the right thought. This worked for me using booleans to track the “hover” shown state of a few components on the screen. This is very dependent on how each specific page is setup, but it did work in my situtation to get the functionality I required.


Say you have a boolean variable “Showing on hover” that defaults to false that is tied to a component’s layer. When the variable is set to true, the component will show. At this point, remove the associated mouse leave interactions and leave the mouse enter interactions. The hover variable should get marked true during a mouse enter event and it should remain on.


For the “hack”, instead of putting the mouse leave interaction on that same component, add a mouse enter interaction on a parent component that is visible on the page to set the “Showing on hover” variable to false. When the parent component is entered after the variable is already set to true, it will hide the hover component. If the variable is already set to false, nothing changes.


I use parent and child component assuming that, visually, components are nested on top of each other on the page. This does not always have to be the case, but I couldn’t think of a better way to describe this.

varsPrototyping

So you suggest I need to add outer frames (physically extending out from original buttons) with onEnter interactions instead of using onMouseLeave on the same frames and components to get hover states in my prototypes?

Yes, if you don’t have an outer frame to utilize already. I have my components that I want “hover” functionality already nested in another component, so I can easily put the outer frame onMouseEnter functionality there.


After playing with this “hack”, this is also not a great solution because if the mouse is moved too fast, it tends to miss the outer frame onMouseEnter and leaves multiple “hover” states enabled. I’m not sure if the sample rate is too low, but as long as the mouse doesn’t move too fast, it tends to work.

I think it all grows from the same garden – the laggishness with which the prototype engine works just adds to every interaction a chance to skip some interactions to happen. If you move the mouse really slow - then both onEnter and onLeave will work fine (should work at least), with the hack of moving the onLeave to another shape we are only giving the machine some more chances to catch the gears, but we dont eliminate the fundamental problem. I believe core crew at Figma knows about this but it might need to fully rewrite the core with some proper programming language to work fast

Reply


Terms & ConditionsCookie settings