JS components throws console error "Error: <Component> is transitioning"

Created by: pvdlg

Following the feature request #17800 (closed), the PR #17823 has been merged. It prompted several issues with the error message Error: <Component> is transitioning in the browser console of the user.

This ticket aims at centralizing those issues, gather feedback and discuss a possible solution.

Here is the issues found so far:

Moving cursor over popover quickly (#21600 (closed))
Tooltip inside modals prevent to close the modal (#21607 (closed))
User quickly triggering a component (collapse, carousel, popover etc...) animation by clicking fast on a button fast (#21704 (closed))
Changing carousel slide before the previous finish transitioning: #21960 (closed)

The issue #21687 (closed) has also been reported but it's not directly related. See comment

The original feature request and PR attempt to warn the user when he call the component API repeatedly instead of waiting for and even before making the next call. Even though this behavior is expected and documented. See comment It worth noting that the previous behavior (skip the call if it's transitioning) is quite common and most framework works this way and expect the developer to understand the notion of asynchronous.

Unfortunately, with the current implementation (#17823) it seems we have inadvertently created more problems than we solved... In addition we have added some complexity to the code, and it seems difficult to anticipate all the potential problem that will be found.

Here is a few solutions I can think of.

1 - Revert #17823 and improve the documentation by adding a clear warning on each transition-capable module page and add more examples of events handling

(+) Remove the added complexity
(+) Work similarly to other framework that deal with asynchronous methods
(+) Avoid any future issues along the lines of (#21600 (closed), #21607 (closed), #21704 (closed))
(-) Even with a big warning on each module page in the docs, we might still have tickets like #17796 (closed)

2 - Improve #17823 to throw an exception only when the call has been made from the API (and not from a trigger element)

(+) Solve #17800 (closed) and avoid tickets like #17796 (closed)
(-) Keep the added complexity
(-) Might still create unexpected issues in cases where we mix API call and element trigger
(-) Might still create unexpected "module interaction" issues like in #21607 (closed)

3 - Allow a method call or a trigger event on the JS components to cancel an on-going transition and a new one

(+) Solve #17800 (closed) in way that doesn't produce console error and provide a good user experience
(+) Tooltips and Popovers already work that way
(-) Difficult to implement for modal as a call to $().modal start 2 successive transitions (backdrop then the modal itself. It would require to distinguish which transition is on going and react differently.
(-) Extremely difficult to implement for the Carousel component. As the items move independently, it would require to adapt the transition speed of each item based on their position when the transition is canceled
(-) Overall add a lot of complexity and risks for regression

Feel free to propose and discuss other potential solutions.

My hunch is that solution 1 (revert and document) might be better. The problem we try to solve is related to developers who do not read the docs or understand asynchronous functions. It feels like this issue is better solved by improved documentation, especially when the "code solution" create issues for the end user. And I think the doc can be improved in that regard. The problem I see with the "code solution" is that it will either create a constant source of bugs or become extremely complicated in order to handle every possible case. Not mentioning that it would make adding new modules/feature more complicated.

I'd love to hear the community and bootstrap team ideas/feedback/opinion.