offcanvas Toggle doesn't trigger if it has image inside (Event doesn't bubble?)

[Duplore]

Toggle being picky on whats it on https://gyazo.com/99dca53751898f9714f8347ecafc0ffa

you cannot use images as a trigger it needs text to work......

[mdo]

You have to share a live demo, videos don't help us.

[Duplore]

@mdo https://codepen.io/KT_NETWORK/pen/BapNKMJ

[dernst-art]

I had the same problem when using icons in the toggle button. As workaround you can add data-bs-target to the element inside the toggle-button/toggle-link also. For your codepen example you have to add data-bs-target="#user-sidebar" to your img element. For me it worked this way.

[shyambheda]

Only text triggers working properly, font icons, svg, img are not working as triggers. here is an example: https://mis.gumatech.com/

if you click on the icon it won't open but if you click on the padding of the button it will work.

[GeoSot]

I think we have problem with eventHandler here :/

[Ri-Dearg]

Hi!
I came across this issue myself and was in a hurry, so I recompiled the JS with this pull request. However, now I find the offcanvas always works the first time. If I close the offcanvas by clicking on the backdrop it continues to work, however if I use the X to close, it won't reopen at all, even on the padding. I don't know if that's useful at all or if I've just jumped the gun, but I thought I'd mention it.

I had the same problem when using icons in the toggle button. As workaround you can add data-bs-target to the element inside the toggle-button/toggle-link also. For your codepen example you have to add data-bs-target="#user-sidebar" to your img element. For me it worked this way.

I can also confirm this workaround is semi-functional. Using an SVG you must also put it on each <path> otherwise certain clicked areas won't function.

[weiserhei]

I came across this by combining the Navbar Example which is putting a <span>-icon inside. The workaround mentioned by @dernst-art seems to fix it, thanks!

<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      <span class="navbar-toggler-icon" data-bs-target="#offcanvasExample"></span>
</button>

[dtrunk90]

The workaround works for SVG images, too. But you have to add the data-bs-target attribute to all sub-elements:

<a class="nav-link" href="#sidebar" data-bs-toggle="offcanvas" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle sidebar">
    <svg class="icon" data-bs-target="#sidebar">
        <use href="#icon-menu" data-bs-target="#sidebar"></use>
    </svg>
</a>

[themesbrand]

Hi,

Looks like this is a z-index issue for the Icon, SVG or any other tag you used inside the anchor tag.
Give the z-index: -1; to the Icon, SVG or any other tag you are using, and check it out.

Thank you