swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.25k stars 744 forks source link

Issue with menu that is taller than the viewport with submenu items #756

Open codesterother opened 2 years ago

codesterother commented 2 years ago

When updating to the latest version, it seems there has been some functionality added to scroll the menu if it becomes too tall. This is great, but it doesn't seem to work in tandem with submenus. I'm not longer able to access the submenus once this special scrolling kicks in.

Here's an example:

<html>
    <head>
        <title>Submenu example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.js"></script>
    </head>
    <body>
        <span class="context-menu-one btn btn-neutral">right click me</span>
        <script>
            $(function(){
                    /**************************************************
                     * Context-Menu with Sub-Menu
                     **************************************************/
                    $.contextMenu({
                        selector: '.context-menu-one', 
                        callback: function(key, options) {
                            var m = "clicked: " + key;
                            window.console && console.log(m) || alert(m); 
                        },
                        items: {
                            "edit": {"name": "Edit", "icon": "edit"},
                            "edit": {"name": "Edit", "icon": "edit"},

                            "cut": {"name": "Cut", "icon": "cut"},
                            "sep1": "---------",
                            "quit": {"name": "Quit", "icon": "quit"},
                            "sep2": "---------",
                            "fold1": {
                                "name": "Sub group", 
                                "items": {
                                    "fold1-key1": {"name": "Foo bar"},
                                    "fold2": {
                                        "name": "Sub group 2", 
                                        "items": {
                                            "fold2-key1": {"name": "alpha"},
                                            "fold2-key2": {"name": "bravo"},
                                            "fold2-key3": {"name": "charlie"}
                                        }
                                    },
                                    "fold1-key3": {"name": "delta"}
                                }
                            },
                            "fold1a": {
                                "name": "Other group", 
                                "items": {
                                    "fold1a-key1": {"name": "echo"},
                                    "fold1a-key2": {"name": "foxtrot"},
                                    "fold1a-key3": {"name": "golf"}
                                }
                            },
                            "edit1": {"name": "Edit", "icon": "edit"},
                            "edit2": {"name": "Edit", "icon": "edit"},
                            "edit3": {"name": "Edit", "icon": "edit"},
                            "edit4": {"name": "Edit", "icon": "edit"},
                            "edit5": {"name": "Edit", "icon": "edit"},
                            "edit6": {"name": "Edit", "icon": "edit"},
                            "edit7": {"name": "Edit", "icon": "edit"},
                            "edit8": {"name": "Edit", "icon": "edit"},
                            "edit9": {"name": "Edit", "icon": "edit"},
                            "edit10": {"name": "Edit", "icon": "edit"},
                            "edit11": {"name": "Edit", "icon": "edit"},
                            "edit12": {"name": "Edit", "icon": "edit"},
                            "edit13": {"name": "Edit", "icon": "edit"},
                            "edit14": {"name": "Edit", "icon": "edit"},
                            "edit15": {"name": "Edit", "icon": "edit"},
                            "edit16": {"name": "Edit", "icon": "edit"},
                            "edit17": {"name": "Edit", "icon": "edit"},
                            "edit18": {"name": "Edit", "icon": "edit"},
                            "edit19": {"name": "Edit", "icon": "edit"},
                            "edit20": {"name": "Edit", "icon": "edit"},
                            "edit21": {"name": "Edit", "icon": "edit"},
                            "edit22": {"name": "Edit", "icon": "edit"},
                            "edit23": {"name": "Edit", "icon": "edit"},
                            "edit24": {"name": "Edit", "icon": "edit"},
                        }
                    });
                });
        </script>
    </body>
</html>

When I click on the submenu items at the top, they do not open as one would expect: image

I feel like this is likely just a permutation that wasn't tested, but it would be nice to have. This becomes more apparent on a mobile phone.

sudeepa88 commented 9 months ago

So edit feature will be under others ?