feat(editable cell): Add focus and blur handling for EditableCell suggestions

-Added on_focus and on_blur props to the EditableCell component to handle focus and blur events.
This commit is contained in:
ryan 2025-01-08 02:42:42 +03:00
parent d81b2a285e
commit e36a24b9d0

View file

@ -9,6 +9,8 @@ pub fn EditableCell(
key: Arc<String>, key: Arc<String>,
focused_cell: ReadSignal<Option<String>>, focused_cell: ReadSignal<Option<String>>,
set_focused_cell: WriteSignal<Option<String>>, set_focused_cell: WriteSignal<Option<String>>,
on_focus: Option<Callback<()>>,
on_blur: Option<Callback<()>>,
) -> impl IntoView { ) -> impl IntoView {
let input_ref = create_node_ref::<html::Input>(); let input_ref = create_node_ref::<html::Input>();
let (local_value, set_local_value) = create_signal(value.clone()); let (local_value, set_local_value) = create_signal(value.clone());
@ -33,6 +35,9 @@ pub fn EditableCell(
move |_| { move |_| {
log!("Focus gained for key: {}", key); log!("Focus gained for key: {}", key);
set_focused_cell.set(Some(key.to_string())); set_focused_cell.set(Some(key.to_string()));
if let Some(on_focus) = &on_focus {
on_focus.call(());
}
} }
}; };
@ -40,6 +45,9 @@ pub fn EditableCell(
log!("Focus lost"); log!("Focus lost");
set_focused_cell.set(None); set_focused_cell.set(None);
commit_input(); commit_input();
if let Some(on_blur) = &on_blur {
on_blur.call(());
}
}; };
// Update input field value when focused cell changes // Update input field value when focused cell changes