Uncaught (in promise) DOMException: The user aborted a request.

[Ashwin M]

Reproduction steps:

rails new modal_stimulus --css tailwind --skip-action-mailbox --skip-jbuilder -a propshaft -j esbuild

generate some scaffold

rails generate scaffold post title:string body:text

then add to yarn

yarn add tailwindcss-stimulus-components

Now follow docs for modal

goto /app/javascript/controllers/index.js and add

import { Modal } from "tailwindcss-stimulus-components"
application.register('modal', Modal)

Then add to any view

<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1" class="relative z-10">
  <a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">Open Modal</a>

  <!-- Modal Background -->
  <div class="hidden fixed inset-0 bg-black bg-opacity-80 overflow-y-auto flex items-center justify-center"
        data-modal-target="background"
        data-action="click->modal#closeBackground"
        data-transition-enter="transition-all ease-in-out duration-300"
        data-transition-enter-from="bg-opacity-0"
        data-transition-enter-to="bg-opacity-80"
        data-transition-leave="transition-all ease-in-out duration-300"
        data-transition-leave-from="bg-opacity-80"
        data-transition-leave-to="bg-opacity-0">

    <!-- Modal Container -->
    <div data-modal-target="container" class="max-h-screen w-full max-w-lg relative">
      <!-- Modal Card -->
      <div class="m-1 bg-white rounded shadow">
        <div class="p-8">
          <h2 class="text-xl mb-4">Large Modal Content</h2>
          <p class="mb-4">This is an example modal dialog box.</p>

          <div class="flex justify-end items-center flex-wrap mt-6">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close:prevent">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Now open browser and go to correct route to find the "Open Modal" button. it may open on the first try but not if you refresh the page.

Console gives "Uncaught (in promise) DOMException: The user aborted a request."

[frispoli]

I faced the same error and notice it also happens when you navigate to another page and click the browser back button to return. If you use a link to reach the page again it works.

I installed tailwindcss-stimulus-components with importmaps (Rails 7).