fix: button submitters now work

KonnorRogers · Nov 23, 2021 · 806bdc2 · 806bdc2
1 parent f275d80
commit 806bdc2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/src/elementDisabler.ts b/src/elementDisabler.ts
@@ -57,11 +57,15 @@ export function disableElement (event: Event | HTMLFormElement | Submitter): voi
 
   const { linkDisableSelector, buttonDisableSelector, formDisableSelector, formSubmitSelector } = window.mrujs
   if (matches(element, linkDisableSelector)) {
+    console.log("here")
     disableLinkElement(element)
   } else if (matches(element, buttonDisableSelector) || matches(element, formDisableSelector)) {
+    console.log(element)
     disableFormElement(element as HTMLFormElement)
+    console.log("here1")
   } else if (matches(element, formSubmitSelector)) {
     disableFormElements(element as HTMLFormElement)
+    console.log("here2")
   }
 }
 
@@ -90,8 +94,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
@@ -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
@@ -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
@@ -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
@@ -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 %>