Bootstrap dropdown disappear with right-click on Firefox

Question

I have some kind of problem with twitter-bootstrap and firefox. I have a button and a dropdown menu with an input text. If I right click on the input ( for right-click + Paste for example), firefox closes the dropdown. And that quite boring.

Is there any solution for prevent that behaviour ?

Thanks !

Answer 1

As an immediate stop-gap workaround you can use something along the following lines to prevent the click event from propagating when the click event is a right-click

JS

$(document).on('click', function(e) {
  e.button === 2 && e.stopImmediatePropagation()
})

This would need to be placed between jQuery loading and Bootstrap loading.

Plunk

However, this is a rather blunt approach and you'd probably be better off doing something more subtle if possible.

---

Update

One way to circumvent this issue in a more targeted manner is to disable the original event listener and replace it with one that checks for right-clicks first.

JS

// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
    return el.namespace === 'data-api.dropdown' && el.selector === undefined
  })[0].handler;

// disable the old listener
$(document)
  .off('click.data-api.dropdown', _clearMenus)
  .on('click.data-api.dropdown', function (e) {
    // call the handler only when not right-click
    e.button === 2 || _clearMenus()
  })

Unlike the previous example, this code would need to run after Bootstrap has loaded.

Plunk