Possible to hover as an action or identify the current step of yada?

[Hunknown]

Hi!

First of all, thank you for this awesome package!

I'm currently trying to set up yada for my project, but I'm struggling to make it work for hover menu (similar to this example from dash-mantine-components in Icons, Right Section, and Colors section). I'm not sure how to make the menu appear from a yada step since it requires the mouse to hover the target button...

I've tried to use "action": "hover" on the target button but the menu stays hidden, so I guess this isn't a supported action (I'm not even sure it's something possible at all actually).

I've also tried to make yada target the first button in the hidden menu but yada will just move to top left corner as the button isn't visible without hovering the button (need to set keepMounted=True to the menu object, or yada will just ignore the step as the button wouldn't even exist in the DOM).

Ultimately, I don't know how to do it unless I could send opened=True to the menu object in some way at this step, but for that, I would need a way to identify at which step yada currently is.

[BSd3v]

Hello @Hunknown,

Thanks for using YADA, mouseover would be a trigger to cause hover I would think, which this isnt currently supported. But if you can get it to work, you are welcome to open a PR.

As far as knowing which step YADA is on, you can look at window.dash_yada.y, however, you will also need to know which script is running and also listen for other button clicks from the offcanvas element. 😄

[Hunknown]

Hello @BSd3v ,

Thank you for your input, it helped me working on a temporary solution for now.

Originally, I wanted to have a callback on next and previous buttons but as they don't have ids, I didn't know how to implement that so I went for an EventListener from dash_extensions on top of the yada component to listen to any click on any yada component:

html.Div(
    children=dext.EventListener(
        YadaAIO(...),
        events=[
            {
                "event": "click",
                "props": ["view.dash_yada.target.id"],
            }
        ],
        id="el",
    ),
    id="div-yada",
),

Then I added a clientside_callback that will trigger on these clicks on yada components:

clientside_callback(
    """
    function(ne, event) {
        if (!ne || !event) return dash_clientside.no_update;
        
        // list of hover components
        hover_comps = ['my-hover-menu']
        if (hover_comps.includes(event['view.dash_yada.target.id'])) {
            window.dash_yada.target.dispatchEvent(e=(document.createEvent('Events')), e.initEvent('mouseover', true, false), e)
        }
        
    }
    """,
    some_dummy_output,
    Input("el", "n_events"),
    Input("el", "event"),
    prevent_initial_call=True,
)

Not the most elegant way to do it, but well, that will do for now.

Note that it will trigger when yada is moving to the target not after moving to next step (contrary to current available actions), but that's what I wanted to achieve anyway.

I'll have to look how to implement it in your code when I'll have some more time to look into it (like building the amended version to test it for example, since I've never done that before).