Replies: 3 comments
-
|
Agree. I have the same issue and don't know how to combine both! |
Beta Was this translation helpful? Give feedback.
-
|
This may seem like a hack but I have a function for closing the dropdown, and it determines if it is open by the export const closeDropdown = () => {
const dropdown = document.querySelector(".dropdown");
const isOpen = dropdown?.scrollHeight === 180 ;
if (isOpen) {
const elem = document.activeElement as HTMLElement;
elem?.blur();
}
};In my case, when the dropdown is open, the scroll height is |
Beta Was this translation helpful? Give feedback.
-
|
I did it like this <dialog ref={modalName} className="modal modal-bottom sm:modal-middle">
<div className="modal-box">
{
// modal content
}
<div className="modal-action">
<button
onClick={() => modalName.current?.close()}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button>close</button>
</form>
</dialog>You should add a form outside the modal box (but still inside the dialog) and without action. When clicked, it will close the modal (it's inside DaisyUI docs, but they don't explain how to combine both) |
Beta Was this translation helpful? Give feedback.
-
Hi,
Here we have 2 different demo, 1 with toggle: https://daisyui.com/components/dropdown/#dropdown-menu-using-details-tag
And this one with click outside to close: https://daisyui.com/components/dropdown/#dropdown-menu
But how to do both? For a good user experience, the best option is to get both, I mean we should be able to close the opened item by clicking outside or clicking again on it (toggle)
Beta Was this translation helpful? Give feedback.
All reactions