Javascript Error on Popover: Uncaught (in promise) DOMException: The user aborted a request

[Allerby]

First off, thanks for all your amazing work to build and support this Gem, its been a massive boon scaffolding out my recent project. I saw this issue pop up when trying to integrate popovers into my app.

Repro Steps

Create new app:

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

Scaffold a model:

rails generate scaffold post title:string

Add the package:

yarn add tailwindcss-stimulus-components

Change root route to posts:

root "posts#index"

Chuck in our popover from the docs

When you mouseover the 'Hover me' text, if you move your mouse over the popover you'll see the exceptions in the console.

[excid3]

Yeah, not sure exactly what's wrong in transition.js. If anyone figures it out, PRs welcome!

Once CSS anchor positioning is widely available, we can drop this whole JS controller hopefully.

[jaywhy]

I looked into this issue. The DOMException or AbortError is coming from the finished promise being implicitly canceled for some reason. I don't know why.

https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished

This is also happening to the Alert component on the example page. In Chrome, the error causes the alert component to not slide in properly. In Firefox, the component errors, but at least the animation works.

https://excid3.github.io/tailwindcss-stimulus-components/

What is interesting about the Alert component is if you remove the translate-x-(0|full) classes and leave the opacity transition. It doesn't produce an AbortError. 🤷‍♂️

This won't error, but the translate-x stuff alone will.

<div
  data-controller="alert"
  data-transition-enter="ease-in-out duration-500"
  data-transition-enter-from="opacity-0"
  data-transition-enter-to="opacity-100"
  data-transition-leave="ease-in-out duration-500"
  data-transition-leave-from="opacity-100"
  data-transition-leave-to="opacity-0"
  class="hidden max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto"
>
   ...
</div>

It also only errors on the transition entering translate-x-full to translate-x-0, but not leaving.

I can post a pull request that catches the AbortError and ignores it. This is a duct tape solution. I don't know what else to do about it.

Let me know.