Dropdown div flickers / triggers twice

Expected behavior

The notification div shows up when the bell icon is clicked.

Actual behavior

The notification div shows up, then flickers at the end of the animation (like it's redoing the animation, but faster). When reopening it a second time, it closes after its animation is over.

Resources (screenshots, code snippets etc.)

Here is the snippet we use:

<!-- Dropdown -->
<div class="dropdown mr-4 d-none d-lg-flex">
    <!-- Toggle -->
    <a href="#" class="text-muted" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="icon active">
            <i class="fe fe-bell"></i>
        </span>
    </a>
    <!-- Menu -->
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Title -->
                    <h5 class="card-header-title">
                        Notifications
                    </h5>
                </div>
                <div class="col-auto">
                    <!-- Link -->
                    <a href="#!" class="small">
                        See all
                    </a>
                </div>
            </div>
            <!-- / .row -->
        </div>
        <!-- / .card-header -->
        <div class="card-body">
            <!-- List group -->
            |
        </div>
    </div>
    <!-- / .dropdown-menu -->
</div>

If it's not a mistake from our HTML, we can provide a clean way to reproduce the problem on the target site directly (it's a private portal that requires the user to be logged in).

Thank you for any feedback! It's our first attempt with MDB and we're loving it so far.