0

I am creating a jQuery menubar, and everything is looking good but I get a weird effect when I mouse over a top level menu item that has a submenu where the first item also has a sub menu. If I mouse in and out (moving left and right over the View menu item) like 20 times, I will start to see the View>Encoding sub-submenu moving more and more to the right.

I can recreate the issue with a modified version of the menubar demo example. I am on firefox 20.0.1.

See here: http://jsfiddle.net/Njjgm/

I figure it is finding the right edge of the subsub menu and then setting the new left edge of the same subsub menu to that position... So if I slow down the opening or fix the positioning math then I shouldn't have that bug.

I'm looking in the jquery.ui.menubar.js file to see if I can adjust the setTimeouts, or fix the subsub menu positioning but not having any luck.

I'm looking at this (from jquery.ui.menubar.js line 262): 

__applyMouseBehaviorForSubmenuHavingMenuItem: function (input, menubar) {

    var menu = input.next( menubar.options.menuElement ),
        mouseBehaviorCallback = function( event ) {
            // ignore triggered focus event
            if ( event.type === "focus" && !event.originalEvent ) {
                return;
            }

            if (event.type === "mouseenter") {

                this.element.find(":focus").focusout();
                if (this.stashedOpenMenu) {                     
                    this._open( event, menu);
                }
                this.stashedOpenMenu = undefined;
            }
            if ((this.open && event.type === "mouseenter") 
                               || this.options.autoExpand) {

                if (this.options.autoExpand) {

                    clearTimeout( this.closeTimer );
                }
                this._open( event, menu );
            }
        };

And also at this: (from jquery.ui.menubar.js line 68)

focusin: function( event ) {
            clearTimeout( menubar.closeTimer );
        },
        focusout: function( event ) {
            menubar.closeTimer = setTimeout (function() {
                menubar._close( event );
            }, 150 );
        },
        "mouseleave .ui-menubar-item": function( event ) {
            if ( menubar.options.autoExpand ) {
                menubar.closeTimer = setTimeout( function() {
                    menubar._close( event );
                }, 150 );
            }
        },
        "mouseenter .ui-menubar-item": function( event ) {
            clearTimeout( menubar.closeTimer );
        }

Has anyone with jquery ui menubar experience seen and fixed this before? Does anyone know a fix with setTimeout? HoverIntent seems to use the same set/clearTimeout technique as menubar, so I don't want to rip out all the logic from menubar to add that in. Any suggestions welcome. Thanks.

Robbie
  • 445
  • 5
  • 13

1 Answers1

0

Well I found a work around to the issue, though I didn't fix the buggy positioning (but I think I found where it could be fixed).

The code by default selects the first list element in a opened menu, and if that element has a menu too, that menu also opens. I took out the code that puts focus on the first child element (why does it even need to do that?)

from jquery.ui.menubar.js line 451

this.active = menu
        .show()
        .position($.extend({
            of: button
        }, this.options.position));
        //.removeAttr("aria-hidden")
        //.attr("aria-expanded", "true")
        //.menu("focus", event, menu.children(".ui-menu-item").first() )
        // TODO need a comment here why both events are triggered
        //.focus()
        //.focusin();

And Presto-Changeo! No more phantom drop down menus... I could have tried to figure out the menu.position but this worked for me.

Robbie
  • 445
  • 5
  • 13