extending jquery-ui menu widget fails, but it shouldnt

Question

This is just a quick question since I cant figure out what's the actual problem here, maybe someone has more experience in extending a jquery-ui widget.

I'm trying to change some behaviour in the menu._close method, extending the widget like this:

( function($, undefined ) {
    $.widget('ui.menu', $.ui.menu, {
        _close: function(startMenu) {
            this._super('_close', startMenu)
                    console.log('extension works!')
        } 
    } )
} (jQuery) );

As far as I can tell from the sources I found, this is the correct way. But now, the problem is the _super method. It should call the original menu._close method, and it does - delivering the only parameter startMenu to it. But the parent method fails.

Here is the source of the original jquery-ui menu._close method:

_close: function( startMenu ) {
    if ( !startMenu ) {
        startMenu = this.active ? this.active.parent() : this.element;
    }

    startMenu
        .find( ".ui-menu" )
        .hide()
        .attr( "aria-hidden", "true" )
        .attr( "aria-expanded", "false" )
        .end()
        .find( "a.ui-state-active" )
        .removeClass( "ui-state-active" );
}

Now, it tells me TypeError: startMenu.find is not a function, and yes, it's not because this.element is not an actual jQuery object. But my question is, why?

I only extended the method, whitout changing any functionality, only adding a debug mesasge after the original method was called, delivering the only parameter to it. What am I doing wrong here?

Thanks in advance, have a nice weekend!

Answer 1

_super() already knows which base method it should call, so passing its name is redundant.

You only have to write:

_close: function(startMenu) {
    this._super(startMenu);
    console.log("extension works!");
}

In your current code, the first argument passed to the base method will be the method name instead of startMenu, which will indeed result in the base method failing.