Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot read property 'parentNode' of undefined

Question

Looping through a list to create a table of information and offcanvas menus to display additional information when a table row <tr> is clicked. Currently, I receive the "parentNode" error when I click on any . Any ideas why I get this error?

The <tr> has a "data-bs-target" point towards the correct "id" for the Offcanvas but for some reason it does not know the parentNode.

Error Message

<table class="table table-hover table-sm" id="t1">
  <thead class="table-secondary">
    <th scope="col" class="name">
      Host Name
    </th>
    <th scope="col" class="ip_address">
      IP Address
    </th>

         ... 

  </thead>
  <tbody class="lan-table">
    {% for host in hosts %}

      <tr class="host-row" data-view='host' data-bs-toggle="offcanvas" data-bs-target="#{{host.fqdn}}-host-details">
        <td class="host-fqdn"></td>
        <td class="host-ip-address"></td>

           ...

      </tr>
    {% endfor %}
  </tbody>
</table>

...

{% for host in hosts %}
  <div class="offcanvas offcanvas-end w-25" data-bs-scroll="true" tabindex="-1" id="{{host.fqdn}}-host-details" style="min-width: 400px;">

    ...

  </div>
{% endfor %}

Below is a screenshot capturing the page being generated correctly. Note: Since this is capturing fqdn information, I blocked my domain for security. Static HTML

Answer 1

I found out why my offcanvas was not working. My "data-bs-target" ids had period characters in them and the javascript for offcanvas uses querySelector which requires escaping the special characters to work.

Here is a link mentioning it. Document.querySelector()