Offcanvas and Modal open and close immediately on some touch devices

andreas-web commented 2 weeks ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

Describe the issue

If an offcanvas (or modal) is not triggered via a button with data-bs-toggle, but is opened "manually" via a pointerup or pointerdown event, it closes again immediately on some touch devices because the backdrop receives an additional event.

Reduced test cases

You can see this clearly in this fiddle: https://jsfiddle.net/andreas_walter/cpoL102a/ (To test with e.g. microsoft surface touchscreen or android tablet)

What operating system(s) are you seeing the problem on?

Windows, Android

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.3.3

andreas-web commented 2 weeks ago

A "hacky" method to get around this is:

const offcanvas = new bootstrap.Offcanvas('#offcanvas');
let save = offcanvas._config.backdrop;
offcanvas._config.backdrop = 'static';
offcanvas.show();
window.setTimeout(function () {
    offcanvas._config.backdrop = save;
}, 500);

andreas-web commented 2 weeks ago

It seems to be related to #39780

twbs / bootstrap