Do not disable previously disabled elements

3 files changed, 29 insertions, 0 deletions

diff --git a/actionview/CHANGELOG.md b/actionview/CHANGELOG.md
index f32bc3ab40..23cbf153ce 100644
--- a/actionview/CHANGELOG.md
+++ b/actionview/CHANGELOG.md
@@ -1,3 +1,9 @@
+*   Fix UJS permanently showing disabled text in a[data-remote][data-disable-with] elements within forms.
+    Fixes #33889
+
+    *Wolfgang Hobmaier*
+
+
 *   Prevent non-primary mouse keys from triggering Rails UJS click handlers.
     Firefox fires click events even if the click was triggered by non-primary mouse keys such as right- or scroll-wheel-clicks.
     For example, right-clicking a link such as the one described below (with an underlying ajax request registered on click) should not cause that request to occur.
diff --git a/actionview/app/assets/javascripts/rails-ujs/features/disable.coffee b/actionview/app/assets/javascripts/rails-ujs/features/disable.coffee
index a8c692ee62..4cfaead078 100644
--- a/actionview/app/assets/javascripts/rails-ujs/features/disable.coffee
+++ b/actionview/app/assets/javascripts/rails-ujs/features/disable.coffee
@@ -34,6 +34,7 @@ Rails.disableElement = (e) ->
 #  Replace element's html with the 'data-disable-with' after storing original html
 #  and prevent clicking on it
 disableLinkElement = (element) ->
+  return if getData(element, 'ujs:disabled')
   replacement = element.getAttribute('data-disable-with')
   if replacement?
     setData(element, 'ujs:enable-with', element.innerHTML) # store enabled state
@@ -58,6 +59,7 @@ disableFormElements = (form) ->
   formElements(form, Rails.formDisableSelector).forEach(disableFormElement)
 
 disableFormElement = (element) ->
+  return if getData(element, 'ujs:disabled')
   replacement = element.getAttribute('data-disable-with')
   if replacement?
     if matches(element, 'button')
diff --git a/actionview/test/ujs/public/test/data-disable-with.js b/actionview/test/ujs/public/test/data-disable-with.js
index b5684e0938..a9a98fb420 100644
--- a/actionview/test/ujs/public/test/data-disable-with.js
+++ b/actionview/test/ujs/public/test/data-disable-with.js
@@ -95,6 +95,27 @@ asyncTest('form button with "data-disable-with" attribute', 6, function() {
   App.checkDisabledState(button, 'submitting ...')
 })
 
+asyncTest('a[data-remote][data-disable-with] within a form disables and re-enables', 6, function() {
+  var form = $('form:not([data-remote])'),
+      link = $('<a data-remote="true" data-disable-with="clicking...">Click me</a>')
+  form.append(link)
+
+  App.checkEnabledState(link, 'Click me')
+
+  link
+    .bindNative('ajax:beforeSend', function() {
+      App.checkDisabledState(link, 'clicking...')
+    })
+    .bindNative('ajax:complete', function() {
+      setTimeout( function() {
+        App.checkEnabledState(link, 'Click me')
+        link.remove()
+        start()
+      }, 15)
+    })
+    .triggerNative('click')
+})
+
 asyncTest('form input[type=submit][data-disable-with] disables', 6, function() {
   var form = $('form:not([data-remote])'), input = form.find('input[type=submit]')