feat(autosearch): improve blur and focus handling to help search wikidata suggestions while typing

assets/style.css

@@ -110,16 +110,24 @@ th {
 
 /* Style for the suggestions list */
 .editable-cell-suggestions {
-    position: absolute;     /* Position suggestions absolutely within the cell */
+    position: absolute;
-    top: 100%;              /* Place suggestions below the input field */
+    background-color: white;
-    left: 0;                /* Align suggestions with the left edge of the cell */
+    border: 1px solid #ccc;
-    width: 100%;            /* Full width of the cell */
+    max-height: 150px;
-    max-height: 200px;      /* Limit height of suggestions list */
+    overflow-y: auto;
-    overflow-y: auto;       /* Add scrollbar if suggestions exceed max height */
+    z-index: 1000;
-    background-color: white; /* White background for suggestions */
+    list-style: none;
-    border: 1px solid #ddd;  /* Light border for suggestions */
+    padding: 0;
-    z-index: 10;            /* Ensure suggestions appear above other content */
+    margin: 0;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
+}
+
+.editable-cell-suggestion {
+    padding: 5px;
+    cursor: pointer;
+}
+
+.editable-cell-suggestion:hover {
+    background-color: #f0f0f0;
 }
 
 /* Style for individual suggestion items */

src/components/editable_cell.rs

@@ -5,33 +5,34 @@ use leptos::logging::log;
 #[component]
 pub fn EditableCell(
     value: String,
-    on_input: impl Fn(String) + 'static,
+    on_input: impl Fn(String) + 'static + Clone,
     key: Arc<String>,
     focused_cell: ReadSignal<Option<String>>,
     set_focused_cell: WriteSignal<Option<String>>,
     on_focus: Option<Callback<()>>,
     on_blur: Option<Callback<()>>,
     input_type: InputType,
+    suggestions: Vec<String>,
+    show_suggestions: bool,
+    on_select_suggestion: Option<Callback<String>>,
 ) -> impl IntoView {
     let input_ref = create_node_ref::<html::Input>();
     let textarea_ref = create_node_ref::<html::Textarea>();
     let (local_value, set_local_value) = create_signal(value.clone());
     let input_type_clone = input_type.clone();
-    // Handle input event
+
-    let handle_input = move |e: web_sys::Event| {
+    // Handle input event with debouncing
+    let handle_input = {
+        let on_input_clone = on_input.clone(); // Clone the callback
+        move |e: web_sys::Event| {
             let new_value = match input_type_clone {
                 InputType::Text => event_target_value(&e),
                 InputType::TextArea => event_target_value(&e),
             };
             log!("Input event: {}", new_value);
-        set_local_value.set(new_value);
+            set_local_value.set(new_value.clone());
-    };
+            on_input_clone(new_value); // Use the cloned callback
-
+        }
-    // Commit the input value on blur or enter
-    let commit_input = move || {
-        let value = local_value.get();
-        log!("Committing input: {}", value);
-        on_input(value);
     };
 
     // Focus handling
@@ -46,13 +47,16 @@ pub fn EditableCell(
         }
     };
 
-    let handle_blur = move |_| {
+    // Blur handling
-        log!("Focus lost");
+    let handle_blur = {
+        let key = Arc::clone(&key);
+        move |_| {
+            log!("Focus lost for key: {}", key);
             set_focused_cell.set(None);
-        commit_input();
             if let Some(on_blur) = &on_blur {
                 on_blur.call(());
             }
+        }
     };
 
     // Update input field value when focused cell changes
@@ -90,6 +94,33 @@ pub fn EditableCell(
                     />
                 }.into_view()
             }}
+
+            // Render suggestions list
+            {move || {
+                if show_suggestions && !suggestions.is_empty() {
+                    view! {
+                        <ul class="editable-cell-suggestions">
+                            {suggestions.iter().map(|suggestion| {
+                                let suggestion_clone = suggestion.clone();
+                                view! {
+                                    <li
+                                        class="editable-cell-suggestion"
+                                        on:click=move |_| {
+                                            if let Some(on_select_suggestion) = &on_select_suggestion {
+                                                on_select_suggestion.call(suggestion_clone.clone());
+                                            }
+                                        }
+                                    >
+                                        {suggestion}
+                                    </li>
+                                }
+                            }).collect::<Vec<_>>()}
+                        </ul>
+                    }
+                } else {
+                    view! { <ul></ul> }
+                }
+            }}
         </div>
     }
 }

src/components/items_list.rs

@@ -596,6 +596,17 @@ pub fn ItemsList(
                                             {match property {
                                                 "Name" => view! {
                                                     <div class="editable-cell">
+                                                        {let suggestions = create_memo(move |_| {
+                                                            wikidata_suggestions.get()
+                                                                .get(&format!("name-{}", index))
+                                                                .cloned()
+                                                                .unwrap_or_default()
+                                                                .into_iter()
+                                                                .map(|s| s.label)
+                                                                .collect::<Vec<_>>()
+                                                        });
+                                                    
+                                                        view! {
                                                             <EditableCell
                                                                 value=item.name.clone()
                                                                 on_input=move |value| {
@@ -622,83 +633,23 @@ pub fn ItemsList(
                                                                     });
                                                                 }))
                                                                 input_type=InputType::Text
-                                                        />
+                                                                suggestions=suggestions.get()
-                                                        <button class="search-icon" on:click=move |_| {
+                                                                show_suggestions=*show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false)
-                                                            log!("Search icon clicked, showing suggestions");
+                                                                on_select_suggestion=Some(Callback::new(move |suggestion:String| {
-                                                            set_show_suggestions.update(|suggestions| {
-                                                                suggestions.insert(format!("name-{}", index), true);
-                                                            });
-                                                        }> 
-                                                            <i class="fas fa-search"></i> Search Wiki
-                                                        </button>
-                                                        {move || {
-                                                            if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) {
-                                                                log!("Rendering suggestions list");
-                                                                view! {
-                                                                        <ul class="editable-cell-suggestions">
-                                                                                {move || {
-                                                                                    let suggestions = wikidata_suggestions.get()
-                                                                                        .get(&format!("name-{}", index))
-                                                                                        .cloned()
-                                                                                        .unwrap_or_default();
-                                                                                    log!("Suggestions for cell {}: {:?}", index, suggestions);
-                                                                                    suggestions.into_iter().map(|suggestion| {
-                                                                                        let label_for_click = suggestion.label.clone();
-                                                                                        let label_for_display = suggestion.label.clone();
-                                                                                        let description_for_click = suggestion.description.clone().unwrap_or_default();
-                                                                                        let description_for_display = suggestion.description.clone().unwrap_or_default();
-                                                                                        let id = suggestion.id.clone();                                                                                    
-                                                                                view! {
-                                                                                    <li class="editable-cell-suggestions-li" on:click=move |_| {
-                                                                                        // Update item with basic suggestion details
                                                                     set_items.update(|items| {
                                                                         if let Some(item) = items.get_mut(index) {
-                                                                                                item.description = description_for_click.clone();
+                                                                            item.name = suggestion.clone();
-                                                                                                item.wikidata_id = Some(id.clone());
-                                                                                                item.name = label_for_click.clone();
                                                                         }
                                                                     });
-
-                                                                                        // Fetch additional properties from Wikidata
-                                                                                        let wikidata_id = id.clone();
-                                                                                        let set_fetched_properties = set_fetched_properties.clone();
-                                                                                        let set_property_labels = set_property_labels.clone();
-                                                                                        spawn_local(async move {
-                                                                                            let properties = fetch_item_properties(&wikidata_id).await;
-                                                                                            // log!("Fetched properties for Wikidata ID {}: {:?}", wikidata_id, properties);
-                                                                                            
-                                                                                            // Populate the custom properties for the new item
-                                                                                            set_items.update(|items| {
-                                                                                                if let Some(item) = items.iter_mut().find(|item| item.wikidata_id.as_ref() == Some(&wikidata_id)) {
-                                                                                                    for (property, value) in properties {
-                                                                                                        item.custom_properties.insert(property, value);
-                                                                                                    }
-                                                                                                }
-                                                                                            });
-                                                                                        });
-
-                                                                                        // Hide the suggestion list
                                                                     set_show_suggestions.update(|suggestions| {
                                                                         suggestions.insert(format!("name-{}", index), false);
-                                                                                            log!("Updated show_suggestions: {:?}", suggestions);
                                                                     });
-                                                                                    }>
+                                                                }))
-                                                                                        { format!("{} - {}", label_for_display, description_for_display) }
+                                                            />
-                                                                                    </li>
-                                                                                }
-                                                                                    }).collect::<Vec<_>>()
-                                                                                }}
-                                                                        </ul>
-                                                                }
-                                                            } else {
-                                                                log!("Suggestions list hidden");
-                                                                view! {
-                                                                    <ul></ul>
-                                                                }
-                                                            }
                                                         }}
                                                     </div>
                                                 }.into_view(),
+
                                                 "Description" => view! {
                                                     <EditableCell
                                                         value=item.description.clone()
@@ -713,8 +664,12 @@ pub fn ItemsList(
                                                             log!("Description input blurred");
                                                         }))
                                                         input_type=InputType::TextArea
+                                                        suggestions=Vec::new() // No suggestions for description
+                                                        show_suggestions=false // No suggestions for description
+                                                        on_select_suggestion=None // No suggestions for description
                                                     />
                                                 }.into_view(),
+
                                                 _ => view! {
                                                     { "" }
                                                 }.into_view(),
@@ -766,15 +721,20 @@ pub fn ItemsList(
                                                         focused_cell=focused_cell
                                                         set_focused_cell=set_focused_cell.clone()
                                                         on_focus=Some(Callback::new(move |_| {
+                                                            // Handle focus event if needed
                                                         }))
                                                         on_blur=Some(Callback::new(move |_| {
+                                                            // Handle blur event if needed
                                                         }))
                                                         input_type=InputType::TextArea
+                                                        suggestions=Vec::new() // No suggestions for custom properties
+                                                        show_suggestions=false // No suggestions for custom properties
+                                                        on_select_suggestion=None // No suggestions for custom properties
                                                     />
                                                 </td>
                                             }
-                                    }).collect::<Vec<_>>()}
+                                        }).collect::<Vec<_>>()
-                                    }
+                                    }}
                                 </tr>
                             }
                         }).collect::<Vec<_>>()