ryan
0e15699b13
- Resolved issues with input handling to ensure smoother updates on focus and blur. - Introduced `commit_input` to properly commit input values on blur or enter. - Added logging to aid debugging and track input events.
65 lines
1.7 KiB
Rust
65 lines
1.7 KiB
Rust
use leptos::*;
|
|
use std::sync::Arc;
|
|
use leptos::logging::log;
|
|
|
|
#[component]
|
|
pub fn EditableCell(
|
|
value: String,
|
|
on_input: impl Fn(String) + 'static,
|
|
key: Arc<String>,
|
|
focused_cell: ReadSignal<Option<String>>,
|
|
set_focused_cell: WriteSignal<Option<String>>,
|
|
) -> impl IntoView {
|
|
let input_ref = create_node_ref::<html::Input>();
|
|
let (local_value, set_local_value) = create_signal(value.clone());
|
|
|
|
// Handle input event
|
|
let handle_input = move |e: web_sys::Event| {
|
|
let new_value = event_target_value(&e);
|
|
log!("Input event: {}", new_value);
|
|
set_local_value.set(new_value);
|
|
};
|
|
|
|
// 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
|
|
let handle_focus = {
|
|
let key = Arc::clone(&key);
|
|
move |_| {
|
|
log!("Focus gained for key: {}", key);
|
|
set_focused_cell.set(Some(key.to_string()));
|
|
}
|
|
};
|
|
|
|
let handle_blur = move |_| {
|
|
log!("Focus lost");
|
|
set_focused_cell.set(None);
|
|
commit_input();
|
|
};
|
|
|
|
// Update input field value when focused cell changes
|
|
create_effect(move |_| {
|
|
if focused_cell.get().as_deref() == Some(key.as_str()) {
|
|
log!("Setting focus for key: {}", key);
|
|
if let Some(input) = input_ref.get() {
|
|
let _ = input.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
view! {
|
|
<input
|
|
type="text"
|
|
value=move || local_value.get()
|
|
on:input=handle_input
|
|
on:focus=handle_focus
|
|
on:blur=handle_blur
|
|
node_ref=input_ref
|
|
/>
|
|
}
|
|
}
|