clean up

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") {
-            (
+            div (class=format!("absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300 {}", if *visible.get() { "visible" } else { "collapse" })) {
-                cloned!((visible, item_list, input2, selected_item, selected) => {
+                ul {
-                    if *visible.get() {
+                    Indexed(IndexedProps {
-                        view! {
+                        iterable: item_list.handle(),
-                            div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300") {
+                        template: move |x| {
-                                ul {
+                            view! {
-                                    Indexed(IndexedProps {
+                                li (
-                                        iterable: item_list.handle(),
+                                    class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400",
-                                        template: move |x| {
+                                    on:mousedown=cloned!((x, input2, selected_item, visible2, selected) => move |_| {
-                                            view! {
+                                            selected.set(true);
-                                                li (
+                                            selected_item.set(Some(x.clone()));
-                                                    class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400",
+                                            input2.set(x.clone().to_select_list_item());
-                                                    on:mousedown=cloned!(
+                                            visible2.set(false);
-                                                        (x, input2, selected_item, visible, selected) => move |_| {
+                                        }),
-                                                            selected.set(true);
+                                    )
-                                                            selected_item.set(Some(x.clone()));
+                                {
-                                                            input2.set(x.clone().to_select_list_item());
+                                    (x.to_select_list_item())
-                                                            visible.set(false);
-                                                        }
-                                                        ),
-                                                        )
-                                                {
-                                                    (x.to_select_list_item())
-                                                }
-                                            }
-                                        },
-                                    })
                                 }
                             }
-                        }
+                        },
-                    } else {
+                    })
-                        view!{ p (class="hidden") { "Placeholder" }  }
+                }
-                    }
+            }
-                })
-            )
         }
     }
 }

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)