Merge pull request #28367 from ptoomey3/ignore-disabled-buttons

Prevent ujs event propagation if element disabled when event chain begins

3 files changed, 38 insertions, 1 deletions

diff --git a/actionview/app/assets/javascripts/features/disable.coffee b/actionview/app/assets/javascripts/features/disable.coffee
index e8cce7da40..90aa3bdf0e 100644
--- a/actionview/app/assets/javascripts/features/disable.coffee
+++ b/actionview/app/assets/javascripts/features/disable.coffee
@@ -2,6 +2,10 @@
 
 { matches, getData, setData, stopEverything, formElements } = Rails
 
+Rails.handleDisabledElement = (e) ->
+  element = this
+  stopEverything(e) if element.disabled
+
 # Unified function to enable an element (link, button and form)
 Rails.enableElement = (e) ->
   element = if e instanceof Event then e.target else e
diff --git a/actionview/app/assets/javascripts/rails-ujs.coffee b/actionview/app/assets/javascripts/rails-ujs.coffee
index df889ce067..afe7d6f7a3 100644
--- a/actionview/app/assets/javascripts/rails-ujs.coffee
+++ b/actionview/app/assets/javascripts/rails-ujs.coffee
@@ -12,7 +12,7 @@
   fire, delegate
   getData, $
   refreshCSRFTokens, CSRFProtection
-  enableElement, disableElement
+  enableElement, disableElement, handleDisabledElement
   handleConfirm
   handleRemote, formSubmitButtonClick, handleMetaClick
   handleMethod
@@ -44,19 +44,23 @@ Rails.start = ->
   delegate document, Rails.buttonDisableSelector, 'ajax:complete', enableElement
   delegate document, Rails.buttonDisableSelector, 'ajax:stopped', enableElement
 
+  delegate document, Rails.linkClickSelector, 'click', handleDisabledElement
   delegate document, Rails.linkClickSelector, 'click', handleConfirm
   delegate document, Rails.linkClickSelector, 'click', handleMetaClick
   delegate document, Rails.linkClickSelector, 'click', disableElement
   delegate document, Rails.linkClickSelector, 'click', handleRemote
   delegate document, Rails.linkClickSelector, 'click', handleMethod
 
+  delegate document, Rails.buttonClickSelector, 'click', handleDisabledElement
   delegate document, Rails.buttonClickSelector, 'click', handleConfirm
   delegate document, Rails.buttonClickSelector, 'click', disableElement
   delegate document, Rails.buttonClickSelector, 'click', handleRemote
 
+  delegate document, Rails.inputChangeSelector, 'change', handleDisabledElement
   delegate document, Rails.inputChangeSelector, 'change', handleConfirm
   delegate document, Rails.inputChangeSelector, 'change', handleRemote
 
+  delegate document, Rails.formSubmitSelector, 'submit', handleDisabledElement
   delegate document, Rails.formSubmitSelector, 'submit', handleConfirm
   delegate document, Rails.formSubmitSelector, 'submit', handleRemote
   # Normal mode submit
@@ -65,6 +69,7 @@ Rails.start = ->
   delegate document, Rails.formSubmitSelector, 'ajax:send', disableElement
   delegate document, Rails.formSubmitSelector, 'ajax:complete', enableElement
 
+  delegate document, Rails.formInputClickSelector, 'click', handleDisabledElement
   delegate document, Rails.formInputClickSelector, 'click', handleConfirm
   delegate document, Rails.formInputClickSelector, 'click', formSubmitButtonClick
 
diff --git a/actionview/test/ujs/public/test/data-confirm.js b/actionview/test/ujs/public/test/data-confirm.js
index 28190c2250..229b9e1466 100644
--- a/actionview/test/ujs/public/test/data-confirm.js
+++ b/actionview/test/ujs/public/test/data-confirm.js
@@ -26,6 +26,13 @@ module('data-confirm', {
       'data-confirm': 'Are you absolutely sure?'
     }))
 
+    $('#qunit-fixture').append($('<button />', {
+      type: 'submit',
+      form: 'confirm',
+      disabled: 'disabled',
+      'data-confirm': 'Are you absolutely sure?'
+    }))
+
     this.windowConfirm = window.confirm
   },
   teardown: function() {
@@ -286,3 +293,24 @@ asyncTest('clicking on the children of a link should also trigger a confirm', 6,
     .find('strong')
     .triggerNative('click')
 })
+
+asyncTest('clicking on the children of a disabled button should not trigger a confirm.', 1, function() {
+  var message
+  // auto-decline:
+  window.confirm = function(msg) { message = msg; return false }
+
+  $('button[data-confirm][disabled]')
+    .html("<strong>Click me</strong>")
+    .bindNative('confirm', function() {
+      App.assertCallbackNotInvoked('confirm')
+    })
+    .find('strong')
+    .bindNative('click', function() {
+      App.assertCallbackInvoked('click')
+    })
+    .triggerNative('click')
+
+  setTimeout(function() {
+    start()
+  }, 50)
+})