fix: button submitters now work (#165)

KonnorRogers · Nov 23, 2021 · 917d362 · 917d362
1 parent f275d80
commit 917d362
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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 %>