Problem with last version 3.0.4

[Ices-Eyes]

Hi, since the 3.0.4 version, once I click on a menu I got this error:

index.js:120 Uncaught TypeError: Cannot read property 'subMenu' of null
    at r.e.setActive (index.js:120)
    at HTMLAnchorElement.<anonymous> (index.js:105)
    at HTMLAnchorElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLAnchorElement.y.handle (jquery-3.3.1.min.js:2)

It was all working fine with previous release. Looking at the code, I got that at lines

setActive(li)...
...const ul = $(li).children(this.config.subMenu);

the property this.config is null, hence the error...
What I'm doing wrong?

[onokumus]

Could you share your menu structure?

[Ices-Eyes]

Sure!

<ul class="metismenu" id="menu">
    <li>
        <a id="ID1" href="#" class="has-arrow" aria-expanded="false">Val1</a>
        <ul class="mm-collapse">
            <li><a href="#">Val2</a></li>
        </ul>
    </li>
    <li>
        <a id="ID2" href="#" class="has-arrow" aria-expanded="false">Val2</a>
        <ul class="mm-collapse">
            <li><a href="#">Val</a></li>
            <li><a href="#">Val</a></li>
            <li><a href="#">Val</a></li>
        </ul>
    </li>
    <li class="mm-active">
        <a id="ID3" href="#" class="has-arrow mm-has-active-menu" aria-expanded="true">Val3</a>
        <ul class="mm-collapse mm-show">
            <li class="mm-selected"><a href="#">Val</a></li>
            <li><a href="#">Val</a></li>
            <li><a href="#">Val</a></li>
        </ul>
    </li>
</ul>

[onokumus]

i don't see any problem.

https://codepen.io/onokumus/pen/MxBYOz

[Ices-Eyes]

This is the complete example, that give the error.
https://codepen.io/Ices_Eyes/pen/qvyZjr

[Ices-Eyes]

Nothing? :(

[onokumus]

The problem is that you created the DOM with jquery. But I haven't produced a solution yet. Can you try with metismenujs?

[Ices-Eyes]

Will try with that version, but it was working also with metismenu with the version available before the 3.0.4...

[onokumus]

It works in this way. But I don't know exactly what you want.

var _SELECTED="3";
var _SUBSELECTED="VAL3";
var tabMenu=[{"MAIN":"Menu 1","VALUE":"1","LABEL":"Label 1","ID":"VAL1"}
,{"MAIN":"Menu 1","VALUE":"1","LABEL":"Label 2","ID":"VAL2"}
,{"MAIN":"Menu 2","VALUE":"2","LABEL":"Label 3","ID":"VAL2"}
,{"MAIN":"Menu 2","VALUE":"3","LABEL":"Label 4","ID":"VAL2"}
,{"MAIN":"Menu 3","VALUE":"1","LABEL":"Label 5","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"2","LABEL":"Label 6","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"3","LABEL":"Label 7","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"4","LABEL":"Label 8","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"5","LABEL":"Label 9","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"6","LABEL":"Label 10","ID":"VAL3"}
,{"MAIN":"Menu 3","VALUE":"7","LABEL":"Label 11","ID":"VAL3"}];

function composeMenu(tableMenu) {
    var cList = $('#menu').empty();
    var prevMain=null;
    var ul=null;
    $.each(tableMenu, function(index, row) {
        if(row.MAIN !== prevMain) {
            var li = $('<li/>')
                .appendTo(cList);
            var content = $('<a/>')
                .text(row.MAIN)
                .attr('href', '#')
                .addClass('has-arrow')
                .attr('aria-expanded', (row.ID === _SELECTED ? 'true' : 'false'))
                .appendTo(li);
            if(row.ID === _SELECTED) {
                li.addClass('mm-active');
                content.addClass('mm-has-active-menu');
            }
            ul=$('<ul/>')
                .appendTo(li);
            prevMain=row.MAIN;
        }
        var li = $('<li/>')
            .appendTo(ul);
        var content = $('<a/>')
            .text(row.LABEL)
            .attr('href', '#')
            .appendTo(li);
        if(row.ID === _SELECTED && row.VALUE === _SUBSELECTED) {
            li.addClass('mm-selected');
        }
    });

    // $('#menu').metisMenu('dispose');
    // $("#menu").metisMenu();
  
  $('.metismenu a').not('.has-arrow').on('click', loadPage);
}

function loadPage(e) {
  e.preventDefault();
    if($(this).parent().hasClass('mm-selected')) return;
    var selected=$(this);
  alert(selected);
}

$(function(){
  composeMenu(tabMenu);
   $("#menu").metisMenu();
});

DEMO : https://codepen.io/onokumus/pen/oVJLpZ

[onokumus]

@Ices-Eyes
Is your problem solved?

[Ices-Eyes]

Hi, made sme try, and the problem seems to reside on the dispose method before creating the menu. Removed the dispose and all is working now... Not sure why this was happening now and not on the previous version.
Thanks,
Luca

[SaeedBoroo]

it Works ... 👍
the newest version (3.0.4) has Bug. just use the previous version 3.0.3.

[WalissonPires]

I'm having the same problem. Is this related to jQuery?

https://codepen.io/walissonpires/pen/jOVYbrj?editors=0010

[WalissonPires]

I solved the problem using setTimeout. The problem is related to a TranstionEnd event that calls some metis function after it has been disposed.

https://codepen.io/walissonpires/pen/xxRpOqq