Offcanvas doesn't show when calling show() programmatically

[djthorpe]

Version:
bootstrap-5.0.0-beta3

Browser:
Google Chrome (on MacOS) 89.0.4389.114

Issue:
Calling show() programatically does not show canvas, only backdrop appears for a moment then disappears

Javascript Class implemented:

class InfoView {
    constructor() {
        var node = document.querySelector("#infosheet");
        this._Modal = new bootstrap.Offcanvas(node);
    }
    doShow() {
            this._Modal.show();
    }
}

HTML implemented:

   <div class="offcanvas offcanvas-bottom" tabindex="-1" id="infosheet" aria-labelledby="info-label">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="info-label">Offcanvas Bottom</h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body small">
          ...
        </div>
    </div>

[GeoSot]

@djthorpe pleasecan you provide a codepen example?

[djthorpe]

Yep apologies - here is the example on codepen:

https://codepen.io/djthorpe/pen/vYgeOVo

[GeoSot]

Very interesting. I suspect the already created offcanvas catches the 'click' event and closes itself.

I am pretty sure, is going to be fixed with #33545

Stay in touch please

Demo codepen

[kinduff]

This fixed the issue I was also facing, but had to add an e.stopPropagation(); in order to make it work again.