Menu won't close if another uib-dropdown is open on the Page

[Ross]

We have a bug using this plugin, the mega menu won't close if the user has opened another uib-dropdown menu on the same page, and then moves the mouse over the menu (the menu opens), and when they move the mouse out of the menu it stays open.

Do you have a fix for this?

Thanks!

[HaoJu Zheng]

Can you use https://jsfiddle.net/ to reproduce this bug？

[Ross]

Hi @hjzheng ,

I couldn't replicate the issue on jsfiddle, I think it's due to how it loads resources. But I was able to reproduce it in this plunker:

https://plnkr.co/edit/LF7tu4u6DEbexP06SgLC?p=preview

EXPECTED RESULT:

1. Move mouse over "Megamenu on hover" link and menu opens.
2. Move mouse out of "Megamenu on hover" menu and menu close.

REPLICATE ISSUE

1. Click on "Click Me (classic uib-dropdown)".
2. Move mouse over "Megamenu on hover" link and menu opens.
3. Move mouse out of "Megamenu on hover" menu and menu does not close.

Thanks :)

[HaoJu Zheng]

It is a bug. but I have no time to fix it, can you help me to fix it ?

[Ross]

yes, but can you point me to where I should look?

I've been looking at src/js/angular-mega-menu.js and am having trouble figuring out what is going on.

At first I tried something like this:

var open = function( dropdownScope ) {
	// IF CLAUSE Fix for plugin which broke when there was other uib-dropdowns on the page
	// and the trigger event is mosueover
	if (dropdownScope.getToggleElement().parents().hasClass("megamenu")) {
		var toggleElement = dropdownScope.getToggleElement();
		var toggleEvent = toggleElement.attr('toggle-event') || 'click';

		if ( !openScope ) {
			$document.bind(toggleEvent, closeDropdown);
			if(toggleEvent !== 'click') $document.bind('click', closeDropdown);
			$document.bind('keydown', keybindFilter);
		}

		if ( openScope && openScope !== dropdownScope ) {
			openScope.isOpen = false;
		}

		openScope = dropdownScope;
	}
};

var close = function( dropdownScope ) {
	//IF CLAUSE Fix for plugin which broke when there was other uib-dropdowns on the page
	// and the trigger event is mosueover
	if (dropdownScope.getToggleElement().parents().hasClass("megamenu")) {
		var toggleElement = dropdownScope.getToggleElement();
		var toggleEvent = toggleElement.attr('toggle-event') || 'click';

		if ( openScope === dropdownScope ) {
			openScope = null;
			$document.unbind(toggleEvent, closeDropdown);
			if(toggleEvent !== 'click') $document.unbind('click', closeDropdown);
			$document.unbind('keydown', keybindFilter);
		}
	}
};

But the stopped the classic uib-dropdown from closing on outside click, is there something I should be looking at? I could have a skype call for you to explain it to me?

[Ross]

@hjzheng I've narrowed it down a bit, this peace of code is causing the issue. It looks like the conditions need to be improved...

// when you hover over the mega menu to open it this is normally true but not if you have a classic uib-dropdown open
// this condition needs to be improved
if ( !openScope ) {
	$document.bind(toggleEvent, closeDropdown);
	if(toggleEvent !== 'click') $document.bind('click', closeDropdown);
	$document.bind('keydown', keybindFilter);
}

// when you hover over the mega menu to open it this is normally false but not if you have a classic uib-dropdown open
// this condition needs to be improved
if ( openScope && openScope !== dropdownScope ) {
	openScope.isOpen = false;
}

[HaoJu Zheng]

@rossmc I think I fix it，but it is a simple fix. please try it again, if you have any other questions, please log issue for me.

[Ross]

@hjzheng Cool!

I think I have a simple fix too, let's see how they compare :)

     // just added this condition "openScope !== dropdownScope"
if ( !openScope || openScope !== dropdownScope ) { 
	$document.bind(toggleEvent, closeDropdown);
	if(toggleEvent !== 'click') $document.bind('click', closeDropdown);
	$document.bind('keydown', keybindFilter);
}

c51eb25

[Ross]

@hjzheng

I tried your fix above, by adding auto-close="always" to the Plunker but it's still the same.

What do you think of my solution above

[HaoJu Zheng]

please check my code changing carefully. https://plnkr.co/edit/A68xZYJ28jFywFgz8dog?p=preview