The dropdown is not working after updating navbar content using HTMX

[ZeyadMoustafaKamal]

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

[julien-deramond]

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.

Yes, it might be really difficult to spot the issue without any reproducible minimal env TBH.
When it doesn't work, are there any errors in the console? Or is it, just, not working?

[ZeyadMoustafaKamal]

I started to figure out how to reproduce it. I will make a video but first, let me explain what happens and how to reproduce this.

So I have some HTML that looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/pretty-checkbox.min.css' %}">
    <title>My Coffee</title>
</head>
<body class="min-vh-100 d-flex flex-column">
    the navbar
    <div id="content" hx-history-elt>
        The main content goes here
    </div>
    the footer
</body>
</html>

and ignore the {%%} it's related to the Django template language. But just here is the main thing, my server returns some HTML content that will be added in the div with the id equal to content. and everything works OK but as you notice the navbar and the footer are outside all of that and this is OK in most cases until I need to rerender them like in case of the user logged in this way I will need to update the data in the navbar like changing the navbar item from login to logout and also put the username in the navbar like as you see "Hello, test". and I took care of that so that when the user logs in the whole page is rendered in the beginning, which works ok but after some time it doesn't work, typically when I try to change the content of the page (even if I just change the content of the div with the id of content) as you will see in the video.

Recording.2024-04-11.193744-2.mp4

[ZeyadMoustafaKamal]

If you need me to clarify anything. feel free to tell me.

[gerardnico]

Di you register your new dropdown?
https://getbootstrap.com/docs/5.3/components/dropdowns/#via-javascript

When the page is loading they are registered via the data attribute but they are not with HTML swapping.