Allow hiding modal synchronously after removing fade class

Created by: joakimriedel

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

When using Bootstrap modals with a reactive framework such as Vue, there might be some rare issues when a component get unmounted from DOM without the possibility to wait for the hide transition to complete if fade class is active. In these cases, I have code in place to remove the fade class to force a synchronous hide without transition.

          console.warn("perf: modal was still visible during sync disposal");

          // https://github.com/twbs/bootstrap/issues/35934
          // disable fade if we're about to unmount while still showing modal
          // otherwise hide call will be asynchronous
          if (modalElement.classList.contains("fade")) {
            modalElement.classList.remove("fade");

            // hack: patch backdrop since it stores its animated value on created
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            (modal.value as any)._backdrop._config.isAnimated = false;
          }

          // the hide call below should now be guaranteed to be synchronous

Currently the isAnimated prop is set during construction of Backdrop instance.

    return new Backdrop({
      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
      isAnimated: this._isAnimated()
    })

(https://github.com/twbs/bootstrap/blob/main/js/src/modal.js#L159)

My suggestion is to make isAnimated property a function instead of boolean.

    return new Backdrop({
      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
      isAnimated: () => this._isAnimated()
    })

This way, if fade class is removed, the backdrop will synchronously remove itself instead of using transition (which will fail since element is removed from DOM when transition ends).

Motivation and context

This feature request is to make the backdrop to properly reflect the fact that the fade class has been removed from modal.

It relates somewhat to https://github.com/twbs/bootstrap/issues/35934 since the issue is that the backdrop is not cleaned up on dispose, only on hide.

I know I am supposed to wait for transitions but there are some rare instances where this cannot be 100% guaranteed and I would like my code to be resilient for this.

I'd be happy to submit a PR if this is something you want to implement.