CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefoxmaterial-design-lite
Anonymous
Anonymous

Reputation: 51

MDL menu click open with right mouse click bug

I've made this fiddle to make debugging easier -> https://jsfiddle.net/ayo8voh2/

JS:

jQuery('.edit-view-submenu').mousedown(function(event) {
    if (event.which === 3) { // right mouse clicked
    // disable default menu
    jQuery(this).bind('contextmenu', function() {
      return false;
    });

    jQuery(this).find('.mdl-button').trigger('click');
  }
});

HTML:

            <div class="edit-view-submenu">
                <button id="edit-context"
                        class="mdl-button mdl-js-button mdl-button--icon float-right">
                    <i class="material-icons">more_vert</i>
                </button>

                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                    for="edit-context">
                    <li class="mdl-menu__item">Show</li>
                    <li class="mdl-menu__item">Show 2</li>
                    <li class="mdl-menu__item">Show 3</li>
                    <li class="mdl-menu__item">Show 4</li>
                </ul>
            </div>

What I wanted to do is when user clicks with right mouse click on the menu button, disable default browsers context menu and trigger default left mouse click ( so that mdl context menu would open ).

To re-create issue:

1) First open fiddle in Chrome, and click on menu icon ( 3 dots ) with the RIGHT mouse button - notice how it opened menu nicely; 2) Now open same fiddle in Firefox and do the same actions - notice how menu opens and immediately closes; ( If you click and hold with right mouse, it will stay open, though. Also, if you click with right mouse and then move cursor to the menu that opened, it will also stay open )

I couldn't find a fix for this as this bug(?) looks really odd for me. Maybe there is something with Firefox that you guys know and I don't?

It's possible to overcome this with positioning menu so that when it is opened, it is opened where the mouse cursor is - and then it doesn't disappear, but it's not a normal fix, but more like a "ugly hotfix".

Thanks for looking into this and have a nice debugging ( if it will be needed ).

Upvotes: 1

Views: 803

Answers (1)

Matthew Haysom
Matthew Haysom

Reputation: 1

I realise this question is really dormant now and I've tried in Firefox and the issue doesn't seem to happen anymore but I believe I have figured out the cause and therefore the answer.

TL;DR - Another right click is detected on the new menu you are creating.

For context: My situation was slightly different in that I wanted a popup at the mouse location when a user right clicks on a canvas type area. I created the right click menu and all was working fine until I aligned the menu with the actual location of the mouse - then I would get the default context menu as well (identical problem to that you have described). So to clarify - code works when menu is in the top left corner of the screen - doesn't work when it's at the mouse location My situation gave me the hint - the problem occurs when the menu appears UNDER the cursor - so what's happening here. I added a bunch of additional listeners to all divs and found that as well as my initial mousedown event on the space, a 'mouseup' was being triggered on the newly displayed menu - and I would guess given the corresponding mousedown was only a few ms earlier my browser (chrome in my case oddly) was piecing it together as a right click on this element. Added the:

$(this).bind('contextmenu', function() {
    return false;
});

to the mouseup event (remember this is on the actual menu item - your ul.mdl-menu) and everything is working as expected.

Realize it's probably too late for OP's question but if anyone else stumbles across this I hope it helps!

Upvotes: 0

Related Questions