Prevent unintended mouse keys from firing click events

Firefox fires click events on left-, right-
and scroll-wheel (any non-primary mouse key) clicks while other browsers don't.

4 files changed, 77 insertions, 1 deletions

diff --git a/actionview/test/ujs/public/test/data-disable-with.js b/actionview/test/ujs/public/test/data-disable-with.js
index 645ad494c3..b5684e0938 100644
--- a/actionview/test/ujs/public/test/data-disable-with.js
+++ b/actionview/test/ujs/public/test/data-disable-with.js
@@ -322,6 +322,25 @@ asyncTest('ctrl-clicking on a link does not disables the link', 6, function() {
   start()
 })
 
+asyncTest('right/mouse-wheel-clicking on a link does not disables the link', 10, function() {
+  var link = $('a[data-disable-with]')
+
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 1 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 1 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 2 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 2 })
+  App.checkEnabledState(link, 'Click me')
+  start()
+})
+
 asyncTest('button[data-remote][data-disable-with] disables and re-enables', 6, function() {
   var button = $('button[data-remote][data-disable-with]')
 
diff --git a/actionview/test/ujs/public/test/data-disable.js b/actionview/test/ujs/public/test/data-disable.js
index 88dc801b2f..9f84c4647e 100644
--- a/actionview/test/ujs/public/test/data-disable.js
+++ b/actionview/test/ujs/public/test/data-disable.js
@@ -250,6 +250,25 @@ asyncTest('ctrl-clicking on a link does not disables the link', 6, function() {
   start()
 })
 
+asyncTest('right/mouse-wheel-clicking on a link does not disable the link', 10, function() {
+  var link = $('a[data-disable]')
+
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 1 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 1 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 2 })
+  App.checkEnabledState(link, 'Click me')
+
+  link.triggerNative('click', { button: 2 })
+  App.checkEnabledState(link, 'Click me')
+  start()
+})
+
 asyncTest('button[data-remote][data-disable] disables and re-enables', 6, function() {
   var button = $('button[data-remote][data-disable]')
 
diff --git a/actionview/test/ujs/public/test/data-remote.js b/actionview/test/ujs/public/test/data-remote.js
index 3503c2cff3..55d39b0a52 100644
--- a/actionview/test/ujs/public/test/data-remote.js
+++ b/actionview/test/ujs/public/test/data-remote.js
@@ -63,6 +63,25 @@ asyncTest('ctrl-clicking on a link does not fire ajaxyness', 0, function() {
   setTimeout(function() { start() }, 13)
 })
 
+asyncTest('right/mouse-wheel-clicking on a link does not fire ajaxyness', 0, function() {
+  var link = $('a[data-remote]')
+
+  // Ideally, we'd setup an iframe to intercept normal link clicks
+  // and add a test to make sure the iframe:loaded event is triggered.
+  // However, jquery doesn't actually cause a native `click` event and
+  // follow links using `trigger('click')`, it only fires bindings.
+  link
+    .removeAttr('data-params')
+    .bindNative('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered')
+    })
+
+  link.triggerNative('click', { button: 1 })
+  link.triggerNative('click', { button: 2 })
+
+  setTimeout(function() { start() }, 13)
+})
+
 asyncTest('ctrl-clicking on a link still fires ajax for non-GET links and for links with "data-params"', 2, function() {
   var link = $('a[data-remote]')
 
@@ -148,6 +167,25 @@ asyncTest('clicking on a button with data-remote attribute', 5, function() {
     .triggerNative('click')
 })
 
+asyncTest('right/mouse-wheel-clicking on a button with data-remote attribute does not fire ajaxyness', 0, function() {
+  var button = $('button[data-remote]')
+
+  // Ideally, we'd setup an iframe to intercept normal link clicks
+  // and add a test to make sure the iframe:loaded event is triggered.
+  // However, jquery doesn't actually cause a native `click` event and
+  // follow links using `trigger('click')`, it only fires bindings.
+  button
+    .removeAttr('data-params')
+    .bindNative('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered')
+    })
+
+  button.triggerNative('click', { button: 1 })
+  button.triggerNative('click', { button: 2 })
+
+  setTimeout(function() { start() }, 13)
+})
+
 asyncTest('changing a select option with data-remote attribute', 5, function() {
   buildSelect()
 
diff --git a/actionview/test/ujs/public/test/settings.js b/actionview/test/ujs/public/test/settings.js
index 05677f2595..682d044403 100644
--- a/actionview/test/ujs/public/test/settings.js
+++ b/actionview/test/ujs/public/test/settings.js
@@ -71,7 +71,7 @@ try {
 } catch (e) {
   _MouseEvent = function(type, options) {
     var evt = document.createEvent('MouseEvents')
-    evt.initMouseEvent(type, options.bubbles, options.cancelable, window, options.detail, 0, 0, 80, 20, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, 0, null)
+    evt.initMouseEvent(type, options.bubbles, options.cancelable, window, options.detail, 0, 0, 80, 20, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, null)
     return evt
   }
 }