Uncaught TypeError when hovering over logo in collapsed mode

Created on 31 July 2025, 13 days ago

Problem/Motivation

When hovering over the logo in collapsed mode, the following TypeError is thrown:

navigation.js?t09y7v:305 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at HTMLLIElement.openTooltip (navigation.js?t09y7v:305:74)

Steps to reproduce

  1. Enable "New Drupal Navigation" toolbar
  2. Collapse the left side admin toolbar
  3. Hover over the logo
  4. Check console for TypeError

Proposed resolution

Check whether the toolbar item contains a span element that can be used to display a tooltip.

πŸ› Bug report
Status

Active

Version

5.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States robphillips

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @robphillips
  • πŸ‡ΊπŸ‡ΈUnited States robphillips
  • Pipeline finished with Success
    13 days ago
    Total: 152s
    #561858
  • I could not reproduce the error, but I also don't see any error or unexpected behavior with the patch applied.

  • πŸ‡ΊπŸ‡ΈUnited States robphillips

    You need to add a logo. The default logo uses different markup that does not cause a TypeError. Another potential solution is to wrap the <img> tag with a <span> tag. Addressing the issue in JavaScript ensures this problem won't occur with other toolbar items that may not follow the exact Gin structure.

    See navigation--gin.html.twig:

    {% if icon_path %}
      <a class="toolbar-link" href="{{ path('<front>') }}">
        <img alt="{{ 'Home'|t }}" src="{{ file_url(icon_path) }}" loading="eager" />
      </a>
    {% else %}
      <a href="{{ path('<front>') }}" class="toolbar-link toolbar-link--has-icon toolbar-link--gin-home">
        <span>{{ 'Home'|t }}</span>
      </a>
      {% endif %}
    
  • πŸ‡ΊπŸ‡ΈUnited States robphillips
Production build 0.71.5 2024