deactivate focusOnHover for submenu

[trail]

Hello,

I deactivated the focusOnHover property for the TaskMenu but I found no way to deactivate it for the submenu "Add". How can this be achieved?

Greetings

[Animal]

How is focusing a menu item on hover thwarting your application goals?

Can you be more specific about the application goal you are aiming for?

this is standard behaviour:

focusonhover.mov

(1.87 MiB) Downloaded 3 times

But disabling it does work:

Screenshot 2024-08-06 at 09.10.14.png (282.71 KiB) Viewed 174 times

[trail]

The goal of not automatically focusing is the possibility to have different stylings for hover and focus.
And that's not possible if hover and focus are basically the same.

For the top level, focusOnHover = false is working but not for submenus.

This is what I currently have:

{
	menu: {
		focusOnHover: false,
	},
	items: {
		add: {
			menu: {
				subMenuItem1: {},
				subMenuItem2: {}
			}
		}

}
}

[Animal]

It's a configuration of Menu, an defaults to true

So

{
	menu: {
		focusOnHover: false,
	},
	items: {
		add: {
			menu: {
                                focusOnHover: false,
				subMenuItem1: {},
				subMenuItem2: {}
			}
		}

}
}```

But yes, focus and hover are the same in menus. That's standard. Try it in your browser or IDE on the native menus.

[trail]

yes, that's what I thought, too.
But the option in the submenu has no effect.

[tasnim]

Reproduced. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/9757

Best regards,
Tasnim

[trail]

Thanks

[Animal]

It's because it's using the menu as the items. Try this:

{
    menu: {
        focusOnHover: false,
    },
    items : {
        add: {
            menu: {
                focusOnHover: false,
                items : {
                    subMenuItem1: {},
                    subMenuItem2: {}
                }
            }
        }
    }
}

menu : { <the submenu items> } is a shortcut if all you are doing is adding a menu. But if you want to configure that menu in addition to specifying items, you have to separate them.

It can't tell which properties are intended to be child items and which are to be configuration properties for the menu. So there has to be a items property.

[trail]

yeah, the focus is working this way but now I have the issue that the default functionality of the seubmenu items is not working anymore. As I said I use TaskMenu. So the items of the add submenu are prefilled (add below, add above, etc.).

[Animal]

The code below propagates the focusOnHover setting from any top level menu to all submenus, making the UX at least consistent if not standard:

Screenshot 2024-08-07 at 09.03.33.png (741.22 KiB) Viewed 103 times

The ticket solution will propagate that setting.

This is the incantation in that example:

MenuItem.prototype.changeMenu = function(config, existingMenu) {
    const
        me = this,
        { owner } = me,
        { constrainTo, scrollAction, focusOnHover } = owner,
        defaults = {
            owner    : me,
            defaults : {
                type      : 'menu',
                align     : 's0-e0',
                anchor    : true,
                autoClose : true,
                autoShow  : false,
                cls       : {
                    'b-sub-menu' : 1 // Marks the widget as a submenu
                },
                forElement : me.element,
                owner      : me,
                ariaLabel  : me.text,
                constrainTo,
                scrollAction
            }
        };

    // This covers both Array and Object which are valid items config formats.
    // menu could be { itemRef : { text : 'sub item 1 } }. But if it has
    // child items or html property in it, it's the main config
    if (config && typeof config === 'object' && !('items' in config) && !('widgets' in config) && !('html' in config)) {
        config = {
            lazyItems : config
        };
    }

    // Propagate the focusOnHover setting to all submenus in the hierarchy
    if (owner.isMenu) {
        me.closeParent = focusOnHover;
        defaults.focusOnHover = focusOnHover;
    }
    return Menu.reconfigure(existingMenu, config, defaults);
}

Obviously the Menu and MenuItem classes must be imported to do this.