formie icon indicating copy to clipboard operation
formie copied to clipboard

'Unhandled Promise Rejection: Timeout' when using SPA over multiple pages

Open simon-mundy opened this issue 7 months ago • 4 comments

Describe the bug

My site uses a VanillaJS router to replace HTML within the DOM. I've manually loaded the formie.js files upon page load so subsequently it uses the same instance, and I simply call Formie.initForms(false) to activate each different form.

The problem I'm seeing is that if I load a form (e.g. on a 'contact' page) then navigate to another page with a form (e.g. 'register' page) is that when I submit the latter form it freezes for around 10-12 seconds and then the console emits a 'Unhandled Promise Rejection: Timeout', causing the current form to be inoperable. Only a manual page refresh will reset it.

It's hard to see exactly why/where this is occurring (so hard to debug!) - if I submit the form with errors then it continues to work, it's only when the form has been validated and submitted that the freeze occurs. I can't see any active XHR requests so not sure what is actually timing out. Is there a best-practice way to try and trace the issue?

I'm using the most up-to-date versions of CraftCMS 5 (5.2.5) and Formie (3.0.0-beta.16).

Steps to reproduce

  1. Set up a simple 2 page SPA app
  2. Manually render the Formie JS
  3. Use Formie.initForms(false) to init forms on separate pages

Form settings

  • Multi-page form: No
  • Submission Method: Ajax
  • Client-side Validation: Yes
  • Custom Form Templates: Yes

Craft CMS version

5.2.5

Plugin version

3.0.0-beta.16

Multi-site?

No

Additional context

No response

simon-mundy avatar Jul 11 '24 00:07 simon-mundy