Skip to main content
LBeck0122
LBeck0122
New Member
August 19, 2023
Question

Mouse leave interaction seems to be not working / won't set variable

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 topic has been closed for replies.

    12 replies

    sararas
    sararas
    September 6, 2023

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

    Katie15
    Katie15
    October 5, 2023

    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.

    Hakim_Jamal
    Hakim_Jamal
    October 12, 2023

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

    UsabilityJeff
    UsabilityJeff
    New Participant
    October 20, 2023

    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.

    Zora_Wan1
    October 26, 2023

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

    MaxZuman
    MaxZuman
    October 27, 2023

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

    stunk1247
    stunk1247
    October 31, 2023

    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.

    MaxZuman
    MaxZuman
    October 31, 2023

    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…

    stunk1247
    stunk1247
    November 1, 2023

    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.

      MaxZuman
      MaxZuman
      November 1, 2023

      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?

      Show more replies
      Terms & ConditionsAccessibility statement