Closing a Dojo menuItem

Question

I am trying to close a dojo menuItem and not sure what the correct call is.

I have this code to open the menuItem onHover:

        dijit._MenuBase.prototype.onItemHover = function(item) {
            if(this.isActive || this.allowSubmenuHover) {
                this.focusChild(item);
                if(this.focusedChild.popup && !this.focusedChild.disabled && !this.hover_timer){
                    this.hover_timer = setTimeout(dojo.hitch(this, '_openPopup'), this.popupDelay);
                }
            }
            if(this.focusedChild){
                this.focusChild(item);
            }
            this._hoveredChild = item;
        };

I have this right now when the menuItem loses focus:

        dijit._MenuBase.prototype.onItemUnhover = function(item) {
            alert('hi');
        };

I am just not sure what to replace the alert statement with to make the menuItem close.

If someone can help me I'd appreciate it.

Thanks

Answer 1

Try this: (you may have to add extra check to see if the mouse is not on a submenu before calling this)

    this._stopPopupTimer();
    item._setSelected(false);
    // Close all popups that are open and descendants of this menu
    var itemPopup = item.popup;
    if(itemPopup){
        this._stopPendingCloseTimer(itemPopup);
        itemPopup._pendingClose_timer = setTimeout(function(){
            itemPopup._pendingClose_timer = null;
            if(itemPopup.parentMenu){
                itemPopup.parentMenu.currentPopup = null;
            }
            dijit.popup.close(itemPopup); // this calls onClose
        }, this.popupDelay);
    }

Answer 2

We have used this:

dijit.popup.close(menuObject);

with menuObject being your menu that you want to close. If you look in the dijit code it looks like that's how they close menu's.

In our project we have found that when closing a menu sometimes it doesn't clear the select highlighting so that the next time you open it the last item you selected is still highlighted. If you run in to that try using:

dojo.query('.dijitMenuItemSelected', menuObject.domNode).removeClass('dijitMenuItemSelected');

Answer 3

Does this help: http://dojo-toolkit.33424.n3.nabble.com/How-do-I-unfocus-the-menu-items-in-a-menu-td1597856.html ?

Did you try focus -ing another widget (or a hidden item?)

---

caveat: I have no idea if this actually helps

Answer 4

Here is my html and js source:

<div id="menu">
<div dojoType="dijit.MenuBar" id="menuBar">
<ul>
    <li>
        <div style="float:left;margin:4px 0 0 0;outline:0 !important;color:#ccc !important;" dojoType="dijit.MenuBarItem" onclick="alert('menu')">
        Home &nbsp;
        <span style="margin:4px 12px 0 0;">|</span>
        </div>
        <div style="float:left;margin:4px 0 0 0;;outline:0 !important;color:#ccc !important;" dojoType="dijit.PopupMenuBarItem">
            <span>System</span>
            <div dojoType="dijit.Menu" id="fileMenu" style="background:#fff !important;margin:4px 0 0;width:140px;border:1px solid #666 !important;padding:4px !important;">
                <div style="outline:0 !important;color:#333 !important;" dojoType="dijit.MenuItem" onClick="alert('hi')">Edit</div>
            </div>
        </div>
    </li>
</ul>
</div>

and the js:

<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.MenuBar");
dojo.require("dijit.MenuBarItem");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dijit.form.Button");

dojo.addOnLoad(function(){
        dijit._MenuBase.prototype.allowSubmenuHover = true;
        dijit._MenuBase.prototype.popupDelay = 500;
        dijit._MenuBase.prototype.onItemHover = function(item) {
            if(this.isActive || this.allowSubmenuHover) {
                this.focusChild(item);
                if(this.focusedChild.popup && !this.focusedChild.disabled && !this.hover_timer){
                    this.hover_timer = setTimeout(dojo.hitch(this, '_openPopup'), this.popupDelay);
                }
            }
            if(this.focusedChild){
                this.focusChild(item);
            }
            this._hoveredChild = item;
        };
        dijit._MenuBase.prototype.onItemUnhover = function(item) {
            this._stopPopupTimer();
            item._setSelected(false);
            var itemPopup = item.popup;
            if(itemPopup){         
                this._stopPendingCloseTimer(itemPopup);
                itemPopup._pendingClose_timer = setTimeout(function(){
                    itemPopup._pendingClose_timer = null;             
                    if(itemPopup.parentMenu){                 
                        itemPopup.parentMenu.currentPopup = null;             
                    }             
                    dijit.popup.close(itemPopup); 
                }, this.popupDelay);     
            }
        };
    });