Uncaught (in promise) DOMException: The user aborted a request.
ashwin47 opened this issue · comments
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."
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).