Bootstrap events for dropdown menus don't fire

Technical Q&A
1

I’m working on a new theme using Bootstrap v5, the problem is that the browser seems to ignore my clicks (even on the navbar in the main menu when on a mobile device)

I can’t seem to work out why, there is no console error and no indication of why it’s not working…

I have the following before the tag, and this isn’t my first rodeo with bootstrap i’ve implemented it without this issue hundreds of times, just never on shopify (using the bundle, which includes the required popper.js thats needed for dropdowns to work)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

https://ktaubtc49u9175n4-65155924214.shopifypreview.com

Code for the dropdown, should be perfect but nothing works

<div class='product-preview'>
    <div class='product-preview-image'>
        <a href='{{ product.url }}'>
            {% assign dateCreated = product.created_at | date: '%s' %}
            {% assign dateNow = 'now' | date: '%s' %}
            {% assign dateDiff = dateNow | minus: dateCreated %}
            {% assign diffInSecondsToBeConsideredNew = 31 | times: 86400 %}

            {% if dateDiff < diffInSecondsToBeConsideredNew %}
                <span class='badge badge-primary'>New</span>
            {% endif %}
            {{ product.featured_image | img_url: '264x264', crop: 'center' | img_tag }}
        </a>
    </div>
    <h4 class='product-preview-title'>{{ product.title }}</h4>
    <h5 class='product-preview-price'>{{ product.price | money }}</h5>
    {% if product.variants.size > 1 %}
        <div class="btn-group d-flex" role="group" aria-label="Add to cart or Wishlist">
            <div class="btn-group" role="group">
                <button id="variantDropdown" type="button" class="btn btn-outline-secondary add-to-cart dropdown-toggle w-75" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class='fa-solid fa-shopping-cart'></i> Add to cart
                </button>
                <div class="dropdown-menu" aria-labelledby="variantDropdown">
                    {% for variant in product.variants %}
                        <button class="dropdown-item" data-tags="{{ variant.tags | join: ',' | downcase }}">{{ variant.title }} - {{ variant.price | money }}</button>
                    {% endfor %}
                </div>
            </div>
            <button class='btn btn-outline-secondary add-to-wishlist w-auto'><i class='fa-solid fa-heart'></i></button>
        </div>
    {% else %}
        <div class="btn-group d-flex" role="group" aria-label="Add to cart or Wishlist">
            <button class='btn btn-outline-secondary add-to-cart w-75' data-tags='{{ product.tags | join: ',' | downcase }}'><i class='fa-solid fa-shopping-cart'></i> Add to cart</button>
            <button class='btn btn-outline-secondary add-to-wishlist w-auto'><i class='fa-solid fa-heart'></i></button>
        </div>
    {% endif %}
</div>
2

I was using v4.x data properties, I had data-toggle=‘dropdown’ instead of data-bs-toggle=‘dropdown’