diff --git a/client/src/components/base_async_select.rs b/client/src/components/base_async_select.rs index 06030e5..53a1f2b 100644 --- a/client/src/components/base_async_select.rs +++ b/client/src/components/base_async_select.rs @@ -64,45 +64,34 @@ where ); let input2 = input.clone(); + let visible2 = visible.clone(); view! { input (bind:value=input, class="p-2 w-full rounded-md bg-slate-300 dark:bg-slate-800", on:blur=hide_dropdown) {} div (class="relative") { - ( - cloned!((visible, item_list, input2, selected_item, selected) => { - if *visible.get() { - view! { - div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300") { - ul { - Indexed(IndexedProps { - iterable: item_list.handle(), - template: move |x| { - view! { - li ( - class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400", - on:mousedown=cloned!( - (x, input2, selected_item, visible, selected) => move |_| { - selected.set(true); - selected_item.set(Some(x.clone())); - input2.set(x.clone().to_select_list_item()); - visible.set(false); - } - ), - ) - { - (x.to_select_list_item()) - } - } - }, - }) + div (class=format!("absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300 {}", if *visible.get() { "visible" } else { "collapse" })) { + ul { + Indexed(IndexedProps { + iterable: item_list.handle(), + template: move |x| { + view! { + li ( + class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400", + on:mousedown=cloned!((x, input2, selected_item, visible2, selected) => move |_| { + selected.set(true); + selected_item.set(Some(x.clone())); + input2.set(x.clone().to_select_list_item()); + visible2.set(false); + }), + ) + { + (x.to_select_list_item()) } } - } - } else { - view!{ p (class="hidden") { "Placeholder" } } - } - }) - ) + }, + }) + } + } } } } diff --git a/client/src/templates/index.rs b/client/src/templates/index.rs index 9013df5..543ae2b 100644 --- a/client/src/templates/index.rs +++ b/client/src/templates/index.rs @@ -94,8 +94,10 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS BaseButton(filter_expand) div () {} // Without this useless div, the code doesn't run in the browser div (class=format!("p-2 border rounded-lg border-slate-200 dark:border-slate-800 bg-slate-200 dark:bg-slate-700 transition-all ease-in {}", - (*expand.get()).then_some("h-40 visible").unwrap_or("h-0 collapse"), - )) { + if *expand.get() { "h-40 visible" } else { "h-0 collapse" }, + ) + ) + { div (class="w-80") { p () {"Search for a company:"} BaseAsyncSelect(async_select_prop)