Bootsrap 5 Dropdown stops working after update

Guys, I have the following problem:

I created a unicorn component and it is basically a card with some visualization options, for that it uses a dropdown, following the structure:

{% load i18n %}
<div>
    <div class="card">
        <div class="card-body p-3 position-relative">
            <div class="row">
                <div class="col-8 text-start">
                    <p class="text-sm mb-1 text-capitalize font-weight-bold">{% translate 'Credits' %}</p>
                    <h5 class="font-weight-bolder mb-0">
                        {{ balance }}
                    </h5>
                    <span class="text-sm text-end font-weight-bolder mt-auto mb-0
                            {% if is_good != None %}{% if is_good %}text-success{% else %}text-danger{% endif %}{% endif %}">
                    {{ periodic_balance }}%
                </span>
                </div>
                <div class="col-4">
                    <div class="dropdown text-end">
                        <a href="javascript:;" class="cursor-pointer text-secondary" id="{{ element_id }}"
                           data-bs-toggle="dropdown" data-toggle="dropdown" aria-expanded="false">
                            <span class="text-xs text-secondary">{{ period_start|date:"d M" }} - {{ period_end|date:"d M" }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end px-2 py-3"
                            aria-labelledby="{{ element_id }}">
                            <li>
                                <button class="dropdown-item border-radius-md" unicorn:click="click_today">
                                    {% translate 'Hoje' %}
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item border-radius-md" unicorn:click="click_week">
                                    {% translate 'Últimos 7 dias' %}
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item border-radius-md" unicorn:click="click_month">
                                    {% translate 'Últimos 30 dias' %}
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Call:

{% unicorn 'credits' user=user.pk lang=LANGUAGE_CODE id="dropdownCredits" %}

Is there any way to re-enable the dropdown or even avoid this problem? I tried the bootsrap JS calls, but with no success.

[riquedev]

v0.34.0 now includes lifecycle events which might be helpful: https://www.django-unicorn.com/docs/templates/#lifecycle-events.

Sorry I didn’t answer, I haven’t tested it yet but it looks like it’s perfect for this situation, I’ll close the issue in this case.

Thank you very much!!

[adamghill]

v0.34.0 now includes lifecycle events which might be helpful: https://www.django-unicorn.com/docs/templates/#lifecycle-events.