Progyssey/Compareware
2
0
Fork 0
Code Issues Pull requests Releases Activity

feat(item_list): add new row on_select other than on_input.

Browse source
This commit is contained in:
ryan 2025-05-23 15:59:01 +03:00
parent a8088c232b
commit 5577f855ca
1 changed files with 20 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/items_list.rs
View file

@ -883,6 +883,9 @@ pub fn ItemsList(
let property_cache_clone = property_cache.clone(); let property_cache_clone = property_cache.clone();
let set_property_cache_clone = set_property_cache.clone(); let set_property_cache_clone = set_property_cache.clone();
let property_labels_clone = property_labels.clone(); let property_labels_clone = property_labels.clone();
let current_url_clone = Rc::clone(&current_url_clone);
let selected_properties_clone = selected_properties.clone();
let items_len = items.len(); // Get the current items length
move |suggestion: WikidataSuggestion| { move |suggestion: WikidataSuggestion| {
let wikidata_id = suggestion.id.clone(); let wikidata_id = suggestion.id.clone();
@ -911,29 +914,9 @@ pub fn ItemsList(
property_labels_for_task property_labels_for_task
).await; ).await;
}); });
}
})
is_last_row={index == items.len() - 1}
on_input=Callback::new({
// Clone items.len() before moving into the closure
let items_len = items.len();
let set_items_clone = set_items.clone();
let current_url_clone = Rc::clone(&current_url_clone);
let selected_properties_clone = selected_properties.clone();
let node_ref_clone = node_ref.clone(); // Clone the node_ref for later use
move |value: String| {
if index == items_len - 1 && !value.is_empty() {
// Store the current active element before modifying the DOM
let document = web_sys::window().unwrap().document().unwrap();
let active_element_id = document
.active_element()
.map(|el| el.id())
.unwrap_or_default();
// Store the current input value
let input_value = value.clone();
// Add a new row if this is the last row
if index == items_len - 1 {
let current_url_for_new_item = Rc::clone(&current_url_clone); let current_url_for_new_item = Rc::clone(&current_url_clone);
let selected_properties_for_new_item = selected_properties_clone.clone(); let selected_properties_for_new_item = selected_properties_clone.clone();
@ -960,59 +943,18 @@ pub fn ItemsList(
).await; ).await;
}); });
}); });
// Schedule focus restoration after the DOM has been updated
spawn_local(async move {
// Small delay to ensure DOM is updated
gloo_timers::future::TimeoutFuture::new(50).await;
// Try to restore focus to the element that had it
if !active_element_id.is_empty() {
if let Some(element) = document.get_element_by_id(&active_element_id) {
if let Some(input) = element.dyn_ref::<web_sys::HtmlInputElement>() {
// Set the value before focusing to preserve what was typed
input.set_value(&input_value);
let _ = input.focus();
// Trigger the typeahead to show suggestions
let trigger_typeahead_script = format!(
r#"
try {{
// Get the input element
var $input = $('#{}');
if ($input.length > 0) {{
// Manually trigger the typeahead query
$input.typeahead('val', '{}');
// Force the menu to open
setTimeout(function() {{
var event = new Event('input', {{
bubbles: true,
cancelable: true,
}});
$input[0].dispatchEvent(event);
}}, 100);
}}
}} catch(e) {{
console.error('Error triggering typeahead:', e);
}}
"#,
active_element_id,
input_value.replace("'", "\\'") // Escape single quotes
);
// Execute the script after a short delay to ensure typeahead is initialized
gloo_timers::future::TimeoutFuture::new(200).await;
let _ = js_sys::eval(&trigger_typeahead_script);
}
}
}
});
} }
} }
}) })
node_ref=node_ref.clone() // Use the node_ref to track this input is_last_row={index == items.len() - 1}
id=format!("name-input-{}", index) // Add a unique ID to each input on_input=Callback::new({
move |value: String| {
}
})
node_ref=node_ref.clone()
id=format!("name-input-{}", index)
/> />
</div> </div>
}.into_view(), }.into_view(),