Using a Menu instance instead of object config renders different

[marciogurka]

Forum post

Using a Menu instance directly inside the configuration makes the positioning not working correctly

• Working snippet

let MainMenu = new Menu({

    autoClose: false,
    appendTo: 'container',
    floating: false,
    maxWidth: '150px',
    onItem: () => { console.log('Clicked') },
    items: [
        SubMenu, SubMenu2, {
            text: 'Menu Item 3',
            closeParent: false, 
            menu: {
                items    : [
                    {
                        icon : 'b-fw-icon b-icon-add',
                        text : 'Add'
                    },
                    {
                        icon : 'b-fw-icon b-icon-trash',
                        text : 'Remove'
                    },
                    {
                        icon     : 'b-fw-icon b-icon-lock',
                        disabled : true,
                        text     : 'I am disabled'
                    },
                    {
                        text : 'Sub menu',
                        menu : [{
                            icon : 'b-fw-icon b-fa-play',
                            text : 'Play'
                        }]
                    }
                ],
                // Method is called for all ancestor levels
                onItem({ item }) {
                    Toast.show('You clicked ' + item.text);
                }
            },
            onItem: () => { console.log('Submenu clicked 3') }
        }
    ]
});

• Non-working snippet

const menu = new Menu({
    items    : [
        {
            icon : 'b-fw-icon b-icon-add',
            text : 'Add'
        },
        {
            icon : 'b-fw-icon b-icon-trash',
            text : 'Remove'
        },
        {
            icon     : 'b-fw-icon b-icon-lock',
            disabled : true,
            text     : 'I am disabled'
        },
        {
            text : 'Sub menu',
            menu : [{
                icon : 'b-fw-icon b-fa-play',
                text : 'Play'
            }]
        }
    ],
    // Method is called for all ancestor levels
    onItem({ item }) {
        Toast.show('You clicked ' + item.text);
    }
});

let SubMenu = new MenuItem({
    text: 'Menu Item',
closeParent: false, 
    onItem: () => { console.log('Submenu clicked') }
});

let SubMenu2 = new MenuItem({
    text: 'Menu Item 2',
closeParent: false, 
    onItem: () => { console.log('Submenu clicked 2') }
});

let SubMenu3 = new MenuItem({
    text: 'Menu Item 3',
closeParent: false, 
menu: menu,
    onItem: () => { console.log('Submenu clicked 3') }
});

let MainMenu = new Menu({

    autoClose: false,
    appendTo: 'container',
    floating: false,
    maxWidth: '150px',
    onItem: () => { console.log('Clicked') },
    items: [
        SubMenu, SubMenu2, SubMenu3
    ]
});