The dropdown is not working after updating navbar content using HTMX

[Zeyad Moustafa]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

So I am building a website using HTMX for the frontend so that the website look like the SPA applications. But sometime I might need to update the navbar content in case if the user logged in as it will require me the signup to logout link. But after doing this I can't open the dropdown anymore. and I have a video to show you what is going on. I wanted to make a video with some bigger details but github might not allow it because of the size.

Recording.2024-04-08.140601-2.mp4

And as you see I can't just open it any more.

And here is the navbar code

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
    <a class="navbar-brand" href="{% url 'index' %}">
        <img src="{% static 'img/mycoffee.png' %}" class="img-brand" alt="My Coffee">
        My Coffee
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">
              <a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Join us
            </a>
            <div class="dropdown-menu animate slideIn" aria-labelledby="navbarDropdown">

                <a class="dropdown-item" href="{% url 'login' %}">Log in</a>
                <a class="dropdown-item" href="{% url 'signup' %}">Sign up</a>
            </div>
          </li>

          <li class="nav-item" id="coffee-nav-item">
              <a class="nav-link" href="#">Coffee</a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Products
            </a>
            <div class="dropdown-menu animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Caffè Americano</a>
            <a class="dropdown-item" href="#">Café Latte</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Cappuccino</a>
            <a class="dropdown-item" href="#">Espresso</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="{% url 'list_products' %}">All Products</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>

        </ul>
        <form class="form-inline my-2 my-lg-0" id="search-form" hx-get="{% url 'list_products' %}" hx-target="#content" hx-push-url=true>
        <input class="form-control mr-sm-2 remove-outline" id="search-input" type="search" name="name__icontains" placeholder="Search" aria-label="Search">
        <input type="hidden" name="description__icontains">
        <input type="hidden" name="price__gt" value="0">
        <div class="btn-group" role="group">
          <button class="btn btn-warning my-2 my-sm-0" type="submit">Search</button>
          <a href="{% url 'search' %}" class="btn btn-warning my-2 my-sm-0" type="submit">
            <svg class="bi bi-gear" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 014.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 018.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z" clip-rule="evenodd"/>
              <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM4.754 8a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>

        </form>
    </div>
</nav>

Reduced test cases

This might be hard because sometimes I do the same thing and it works Ok and sometimes it doesn't. so that why I don't think that it might be easy. and also as I am working on a backend it doesn't seem that there is some way to reproduce the error in codepen.

What operating system(s) are you seeing the problem on?

The code is in the WSL but the browser is in windows.

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

4.4.1