feat(EditableCell): add signal disposal handling and logging
- Introduced `is_disposed` signal to track component disposal state. - Added `on_cleanup` hook to set disposal flag and log when the component is disposed. - Enhanced signal access with `log_signal_get` to prevent usage after disposal. - Improved input, focus, and blur handlers to respect disposal state. - Ensured robust handling of signals during the component's lifecycle. This improves resilience and debugging for EditableCell, especially in dynamic UI contexts.
This commit is contained in:
parent
c4a45d9185
commit
40140b40c4
1 changed files with 25 additions and 1 deletions
|
@ -1,5 +1,5 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
|
use leptos::logging::log;
|
||||||
#[component]
|
#[component]
|
||||||
pub fn EditableCell(
|
pub fn EditableCell(
|
||||||
value: String,
|
value: String,
|
||||||
|
@ -9,17 +9,41 @@ pub fn EditableCell(
|
||||||
let (input_value, set_input_value) = create_signal(value.clone());
|
let (input_value, set_input_value) = create_signal(value.clone());
|
||||||
let (has_focus, set_has_focus) = create_signal(false); // Track focus state locally
|
let (has_focus, set_has_focus) = create_signal(false); // Track focus state locally
|
||||||
|
|
||||||
|
let (is_disposed, set_disposed) = create_signal(false); // Track disposal state
|
||||||
|
|
||||||
|
// Ensure signals aren't updated after disposal
|
||||||
|
on_cleanup(move || {
|
||||||
|
log!("Component disposed");
|
||||||
|
set_disposed.set(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
let log_signal_get = move |signal_name: &str| {
|
||||||
|
if is_disposed.get() {
|
||||||
|
panic!("Attempted to get disposed signal: {}", signal_name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
let handle_input = move |e: web_sys::Event| {
|
let handle_input = move |e: web_sys::Event| {
|
||||||
|
log_signal_get("input_value");
|
||||||
|
if is_disposed.get_untracked() {
|
||||||
|
return;
|
||||||
|
}
|
||||||
let new_value = event_target_value(&e);
|
let new_value = event_target_value(&e);
|
||||||
set_input_value.set(new_value.clone());
|
set_input_value.set(new_value.clone());
|
||||||
on_input(new_value);
|
on_input(new_value);
|
||||||
};
|
};
|
||||||
|
|
||||||
let handle_focus = move |_: web_sys::FocusEvent| {
|
let handle_focus = move |_: web_sys::FocusEvent| {
|
||||||
|
if is_disposed.get() {
|
||||||
|
return;
|
||||||
|
}
|
||||||
set_has_focus.set(true);
|
set_has_focus.set(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
let handle_blur = move |_: web_sys::FocusEvent| {
|
let handle_blur = move |_: web_sys::FocusEvent| {
|
||||||
|
if is_disposed.get() {
|
||||||
|
return;
|
||||||
|
}
|
||||||
set_has_focus.set(false);
|
set_has_focus.set(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue