Hello guys. In the following code im trying to achieve facebook-like dropdown opening on photo thumbnail. Lightbox is opening fine but when I click on dropdown lightbox is still being opened instead of dropdown. There seems to be some event binding on dropdown because when you click it 1st time lightbox is opened. However when you click dropdown 2nd time lightbox is correctly not being opened and instead dropdown menu is. Ive tried using stopPropagation() but that only breaks the function of dropdown... Please help :) Take a look at the following code:

<!-- Lightbox containers -->
<div class="mdb-lightbox-ui"></div>

    <!-- Lightbox gallery -->
    <div class="mdb-lightbox" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1">
        <figure class="view overlay col-md-4" itemprop="associatedMedia" itemscope=""
                itemtype="http://schema.org/ImageObject">
            <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                <!-- Thumbnail-->
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">
            </a>

            <div>
                <div class="mask cursor-zoom-in p-3 d-flex align-items-end rgba-black-light text-white">
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</span>
                    </div>
                    <div class="ml-auto dropdown">
                        <a class="badge badge-light" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
                        <div class="dropdown-menu dropdown-menu-right" data-boundary="window">
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-edit"></i> Edit photo
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-folder-minus"></i> Delete photo
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <figcaption itemprop="caption description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Possimus nobis sit veritatis
                cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate
                sequi corporis eaque corrupti. Vel, est.
            </figcaption>
        </figure>
    </div>

---