'Bootstrap 5 offcanvas disable close on click

I'm using the offcanvas component (https://getbootstrap.com/docs/5.0/components/offcanvas/). However I was wondering if it is possible to prevent it from closing when I click outside the offcanvas window. I've managed to stop it from closing when I press ESC but theres no way (as far as the docs go) to prevent it from closing when I do a mouse click outside of the offcanvas. Does anyone have an idea?

EDIT: I managed to get it working halfway by listening for the hide.bs.offcanvas event and then using e.preventDefault(); However now I'm unable to close the offcanvas with its default close button because it will always cancel the hide event. Any ideas?

Solution 1:^[1]

I don't love this solution, but it works for my needs as of today. (I'm really hoping Bootstrap will give us this functionality ASAP.)

$("#myOffcanvas").on("shown.bs.offcanvas", function () {
    const backdrop = $(".offcanvas-backdrop");
    const parent = backdrop.parent();
    const cloned = backdrop.clone();
    backdrop.remove();
    parent.append(cloned);
}).on("hide.bs.offcanvas", function () {
    $(".offcanvas-backdrop").remove();
});

Solution 2:^[2]

Setting data-bs-keyboard="false" as a data-attribute of the off-canvas element seems to work in Bootsrap 5.1.1

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DaleyKD
Solution 2	Chris02stang

'Bootstrap 5 offcanvas disable close on click

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]