htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.61k stars 289 forks source link

Dropdown menu doesn't open if child contains `onclick` or `data-hs-overlay` #374

Closed max-programming closed 4 months ago

max-programming commented 4 months ago

In my blazor app, I have the below dropdown menu and it worked fine. Until I added a data-hs-overlay to open a modal when an item is clicked. Also adding onclick attribute does the same

<div>
      <div class="hs-dropdown relative inline-flex">
            <button id="dropdown-actions" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800" disabled="@(_selectedAssets.Count < 1)">
                Actions
                <i class="ti ti-chevron-down"></i>
            </button>
            <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg p-2 mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" aria-labelledby="dropdown-actions">
                <button class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 cursor-pointer" data-hs-overlay="#checkout-modal">
                    Check out
                </button>
            </div>
        </div>

        <CheckoutModal
            Assets="_selectedAssets"  
        />
</div>

The issue is mainly that the dropdown menu doesn't open when there is an onclick or data-hs-overlay inside of it

max-programming commented 4 months ago

If anyone is looking for a workaround, this could be because of some elements not being initialized by Preline. But I think the problem is something else. Anyways, here's a workaround for me

https://github.com/htmlstreamofficial/preline/issues/197#issuecomment-2131174380

jahaganiev commented 4 months ago

Hey @max-programming - looks like the issue has been resolved. Please feel free to open a new issue if you'll have any issues in future.