Javascript error thrown in the browser console when using the Offcanvas navbar example

[gomesp]

Hi team

I am looking at the examples available on the website and when I use the offcanvas navbar example I keep getting errors thrown in the browser console (using Firefox and Chrome on macOS - all latest versions).

To reproduce it I:

1. Opened the example from the bootstrap website
2. Resized my browser to the small breakpoint to change the navbar
3. Clicked on the burger menu to expand the navbar.

In Firefox I get the following error:

offcanvas.js:207:11
Uncaught TypeError: this._element is undefined
    _addEventListeners offcanvas.js:207
    i event-handler.js:101
    C event-handler.js:196
    on event-handler.js:224
    _addEventListeners offcanvas.js:205
    Oe offcanvas.js:78
    <anonymous> offcanvas.js:262
    s event-handler.js:119
    C event-handler.js:196
    on event-handler.js:224
    <anonymous> offcanvas.js:238
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6
offcanvas.js:207:11
    _addEventListeners offcanvas.js:207
    i event-handler.js:101
    (Async: EventListener.handleEvent)
    C event-handler.js:196
    on event-handler.js:224
    _addEventListeners offcanvas.js:205
    Oe offcanvas.js:78
    <anonymous> offcanvas.js:262
    s event-handler.js:119
    (Async: EventListener.handleEvent)
    C event-handler.js:196
    on event-handler.js:224
    <anonymous> offcanvas.js:238
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6

And in Chrome I get a slightly different error:

Uncaught TypeError: Cannot read property 'defaultPrevented' of null
    at Oe.show (offcanvas.js:102)
    at Oe.toggle (offcanvas.js:94)
    at HTMLButtonElement.<anonymous> (offcanvas.js:264)
    at HTMLDocument.s (event-handler.js:119)
show @ offcanvas.js:102
toggle @ offcanvas.js:94
(anonymous) @ offcanvas.js:264
s @ event-handler.js:119

[GeoSot]

Nice catch @gomesp

Offcanvas example, is based on the old custom implementation., but still uses the data-bs-toggle="offcanvas" that triggers the offcanvas component without a given target.
For this case the data-bs-toggle has to changes in order to be fixed

Explanation:

Base-component checks for element and returns after element check failing, but the offcanvas component continues its initialization, ignoring the previous fail.
/CC @rohit2sharma95 @alpadev
Maybe base-component must throw an exception on null element? It applies to all components

[alpadev]

Maybe I'm not fully understanding the problem but wouldn't be adding data-bs-target to the button solve the errors?

Regarding throwing an error in the base component if the element is missing. It might be some adequate solution to make it more obvious when a component isn't used properly, eventually causing other errors.

Just not sure if throwing is a breaking change then.

[gomesp]

Glad to be of help @GeoSot. :)

[GeoSot]

@gomesp can you make a MR that solves the issue?

Maybe I'm not fully understanding the problem but wouldn't be adding data-bs-target to the button solve the errors?

Regarding throwing an error in the base component if the element is missing. It might be some adequate solution to make it more obvious when a component isn't used properly, eventually causing other errors.

Just not sure if throwing is a breaking change then.

@alpadev the example, is based on custom implementation (goes many years back) , but both example and Offcanvas, use the same trigger-selector. I am not in position to tell right now if we can change it to work using the offcanvas component