How to close Tailwind DaisyUI dropdown?

[gitmalong]

Hi!

I am very new to Leptos and I am wondering how I could properly close a Dropdown after an entry was selected/clicked

Given the following:

https://daisyui.com/components/dropdown/

Method 1: Stays open until gets clicked again. Or you can close it using JS by removing the open attribute
Method 2: using label and CSS focus

<div class="dropdown">
<label tabindex="0" class="btn m-1">Entries { move || entry().to_string() }</label>
  <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
      <li><a on:click=move |_| set_entry.update(|entry| *entry = "1")>1</a></li>
      <li><a on:click=move |_| set_entry.update(|entry| *entry = "2")>2</a></li>
  </ul>
</div>

Thanks!

[gbj]

Using their "Method 1: Details and summary" and the open property on <details>:

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    let (open, set_open) = create_signal(cx, false);

    view! { cx,
        <details class="dropdown mb-32" prop:open=open>
            <summary class="m-1 btn">"open or close"</summary>
            <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
                <li><a on:click=move |_| set_open(false)>"Item 1"</a></li>
                <li><a on:click=move |_| set_open(false)>"Item 2"</a></li>
            </ul>
        </details>
    }
}

That's what I'd do, personally.