From 917d362376973e2679e2eaef6597c0ab36888f69 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 22 Nov 2021 21:09:15 -0500
Subject: [PATCH] fix: button submitters now work (#165)

---
 src/elementDisabler.ts                               | 5 ++++-
 src/method.ts                                        | 4 ++--
 src/utils/dom.ts                                     | 2 +-
 test/rails/dummy/app/javascript/packs/application.js | 8 ++++++--
 test/rails/dummy/app/views/posts/_form.html.erb      | 3 ++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/elementDisabler.ts b/src/elementDisabler.ts
index 6432d43..e5ad733 100644
--- a/src/elementDisabler.ts
+++ b/src/elementDisabler.ts
@@ -90,8 +90,11 @@ function disableFormElement (element: HTMLFormElement): void {
     }
   }
 
-  element.disabled = true
   element.dataset.ujsDisabled = 'true'
+
+  // Due to how FormSubmissions work in Chrome, if the button is disabled prior
+  // to submitting the form, then form "submit" event will never trigger.
+  setTimeout(() => { element.disabled = true })
 }
 
 /**
diff --git a/src/method.ts b/src/method.ts
index 06fc44d..5e4151a 100644
--- a/src/method.ts
+++ b/src/method.ts
@@ -1,4 +1,4 @@
-import { AJAX_EVENTS, dispatch, stopEverything } from './utils/events'
+import { AJAX_EVENTS, dispatch } from './utils/events'
 import { EventQueryInterface, MrujsPluginInterface } from '../types'
 import { addListeners, removeListeners, attachObserverCallback } from './utils/dom'
 import { MethodSubmission } from './methodSubmission'
@@ -57,7 +57,7 @@ export function handleMethod (event: Event): void {
 
   if (href == null) return
 
-  stopEverything(event)
+  event.preventDefault()
   const submitter = event.target
 
   const linkSubmission = MethodSubmission(element)
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index ea7e8af..71946d2 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -80,7 +80,7 @@ export const BASE_SELECTORS: QuerySelectorInterface = {
   linkDisableSelector: `a[${disableWith}], a[${disable}]`,
 
   // Button onClick disable selector with possible reenable after remote submission
-  buttonDisableSelector: `button[${disableWith}], button[${disable}]`,
+  buttonDisableSelector: `button[data-remote][${disableWith}], button[data-remote][${disable}]`,
   fileInputSelector: 'fileInputSelector: \'input[name][type=file]:not([disabled])\''
 }
 
diff --git a/test/rails/dummy/app/javascript/packs/application.js b/test/rails/dummy/app/javascript/packs/application.js
index aa7816e..e30e200 100644
--- a/test/rails/dummy/app/javascript/packs/application.js
+++ b/test/rails/dummy/app/javascript/packs/application.js
@@ -1,4 +1,5 @@
-import mrujs from 'mrujs'
+// import Racks from "@rails/ujs"
+import Rails from 'mrujs'
 import { ActiveStorage, JsErb } from "mrujs/plugins"
 // import { JsErb } from "mrujs/plugins"
 // import * as ActiveStorage from "@rails/activestorage"
@@ -14,12 +15,15 @@ import "../stylesheets/application.css"
   }
 })()
 
-mrujs.start({
+Rails.start({
   plugins: [
     JsErb(),
     ActiveStorage()
   ]
 })
+
+// window.Racks = Racks
+// Racks.start()
 // ActiveStorage.start()
 
 document.addEventListener("direct-upload:initialize", event => {
diff --git a/test/rails/dummy/app/views/posts/_form.html.erb b/test/rails/dummy/app/views/posts/_form.html.erb
index 9e93022..247abdd 100644
--- a/test/rails/dummy/app/views/posts/_form.html.erb
+++ b/test/rails/dummy/app/views/posts/_form.html.erb
@@ -10,7 +10,8 @@
   <%= render partial: "posts/form_body", locals: {form: form, post: post} %>
 
   <div class="actions">
-    <%= form.submit nil, data: {"disable-with" => "Submitting..."} %>
+    <%# <%= form.submit nil, data: {"disable-with" => "Submitting..."} %1> %>
+    <%= form.button nil, data: {"disable-with" => "Submitting..."} %>
   </div>
 <% end %>