Offcanvas Backdrop Disappears On Wire:Click

[Daniel Sonoiki]

Prerequisites

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

Describe the issue

I am a Laravel/Livewire developer and I use Bootstrap for many things, including modals and offcanvas. The issue is that when I have offcanvas on, and I make any interaction which involves Livewire, the backdrop is removed and the body becomes scrollable.

Let me say that this issue does not happen with modals at all. And I think it is because the way modals are designed is a bit different from offcanvas. For modals, the div (for example) structure looks like:
.modal > .modal-dialog > .modal-content (which contains modal-header, modal-body, modal-footer)

And if I am correct, the backdrop for modal is tied to modal-dialog.

However, for offCanvas, the structure is just .offcanvas which contains the header, body and footer.

Can the Bootstrap Team look into this and try to replicate offCanvas like modal?

Reduced test cases

nill

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

Windows

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

Chrome

What version of Bootstrap are you using?

v5.3.x

[Daniel Sonoiki]

I fixed this by creating a custom CSS class .canvas-backdrop and tied it to both data-bs-toggle="offcanvas" and data-bs-dismiss="offcanvas".

CSS Code:

.canvas-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgb(0, 0, 0);
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	z-index: 1040;
}
.canvas-backdrop.show {
	display: block;
	opacity: .5;
}

jQuery code:

$('[data-bs-toggle="offcanvas"]').on('click', function() {
		$('.canvas-backdrop').toggleClass('show');
	});

	$('[data-bs-dismiss="offcanvas"]').on('click', function() {
		$('.canvas-backdrop').removeClass('show');
	});

And this solved the issue permanently.