Bootstrap 5 offcanvas is not working with images or icons inside the anchor

Question

You might see it as a duplicate but let me assure you I have looked into several questions on stakeoverflow and was not able to find similar question.

I have implemented Bootstrap 5 offcanvas and there is a weird issue with it.

It works perfectly when you trigger a button (anchor/button) with text inside it. But the moment you put an image inside it or an icon svg. It stops working.

Here is my code:

Top Menu of my app

<div class="w-100 border fixed-top py-2">
<a class="btn float-start d-inline offcanvas_btn" data-bs-toggle="offcanvas" href="#sidebar_left" role="button" aria-controls="sidebar_left" >
<img src="https://www.bylde.com/assets/img/bylde-logo-small.webp?v=B01234567" class="img-fluid hlogo rounded">
</a>

<a class="btn float-end d-inline" data-bs-toggle="offcanvas" href="#sidebar_right" role="button" aria-controls="sidebar_right">
Menu
</a>

<div class="clearfix"></div>
</div>

This is sidebar code:

<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar_left" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Very simple straightforward implementation as per bootstrap documentation (offcanvas)

Replication steps:

1. Go on your mobile device
2. Go to the test URL
3. Click on menu (top right)
4. click on logo on top left

See the difference.

Answer 1

This is a known issue in beta-3 that will be resolved in the 5.0.0 release.

The workaround is to use data-bs-toggle="offcanvas" on the inner element...

  <a class="btn float-start d-inline offcanvas_btn" href="#sidebar_left" role="button" aria-controls="sidebar_left">
      <img src="https://www.bylde.com/assets/img/bylde-logo-small.webp?v=B01234567" style="width: 30px" data-bs-target="#sidebar_left" data-bs-toggle="offcanvas" class="img-fluid hlogo rounded">
  </a>

Demo

Answer 2

I was having a span and svg inside anchor. I used data-bs-target="#offcanvasExample" data-bs-toggle="offcanvas" in all tag 'a', 'span' and 'svg'. So when i click any where in the anchor svg or span it works.

<li class='nav-item'>
   <a class='nav-link' data-bs-toggle='offcanvas' data-bs-target='#offcanvasExample'  href='#offcanvasExample' role='button' aria-controls='offcanvasExample' role='button'>
    <svg data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);transform:;-ms-filter:"><path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path></svg>
    <span data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" class="nav-label">Account</span>
   </a>
 </li>


<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
   <div class="mt-3">
     <a  class='' href='fav_add'>Favourite</a>";
     <a  class='' href='chat_lst'>Chat"</a>
     <a class='' href='logout'>Logout</a>";
    </div>
  </div>
</div>