Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
max-programming opened this issue May 23, 2024 · 2 comments

Comments

@max-programming
Copy link

max-programming commented May 23, 2024

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
Copy link
Author

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

#197 (comment)

@jahaganiev
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants