From 4f9d423a5cebd7befd1571f13fb62d12745b753c Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Sat, 4 Jan 2025 22:30:32 +0300
Subject: [PATCH] fix(item_list): enhance ItemsList component with centralized
 focus management for EditableCell

- Added `focused_cell` and `set_focused_cell` signals to handle global focus state across cells.
- Updated `EditableCell` usage in `ItemsList` to utilize `Arc<String>` keys for efficient reference sharing.
- Simplified focus handling by removing local state tracking and integrating centralized focus management.
- Ensured better UX by making the currently edited cell regain focus after state updates.
- Improved dynamic property handling by applying the new focus mechanism to both default and custom properties.
---
 src/components/items_list.rs | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/items_list.rs b/src/components/items_list.rs
index 3f9f2f6..df1cb6b 100644
--- a/src/components/items_list.rs
+++ b/src/components/items_list.rs
@@ -21,6 +21,9 @@ pub fn ItemsList(
     items: ReadSignal<Vec<Item>>,
     set_items: WriteSignal<Vec<Item>>,
 ) -> impl IntoView {
+    // State to track the currently focused cell
+    let (focused_cell, set_focused_cell) = create_signal(None::<String>);
+
     // State to manage dynamic property names
     let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new());
     
@@ -159,8 +162,10 @@ pub fn ItemsList(
                                                 "Name" => view! {
                                                 <EditableCell
                                                     value=item.name.clone()
-                                                        on_input=move |value| update_item(index, "name", value)
-                                                        key=format!("name-{}", index)
+                                                    on_input=move |value| update_item(index, "name", value)
+                                                    key=Arc::new(format!("name-{}", index))
+                                                    focused_cell=focused_cell
+                                                    set_focused_cell=set_focused_cell.clone()
                                                 />
                                                 <ul>
                                                         {move || {
@@ -199,15 +204,17 @@ pub fn ItemsList(
                                                 "Description" => view! {
                                                 <EditableCell
                                                     value=item.description.clone()
-                                                        on_input=move |value| update_item(index, "description", value)
-                                                        key=format!("description-{}", index)
+                                                    on_input=move |value| update_item(index, "description", value)
+                                                    key=Arc::new(format!("description-{}", index))
+                                                    focused_cell=focused_cell
+                                                    set_focused_cell=set_focused_cell.clone()
                                                 />
                                                 }.into_view(),
                                                 "Tags" => view! {
                                                 <TagEditor
                                                     tags=item.tags.clone()
-                                                        on_add=move |key, value| add_tag(index, key, value)
-                                                        on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
+                                                    on_add=move |key, value| add_tag(index, key, value)
+                                                    on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
                                                 />
                                                 }.into_view(),
                                                 "Actions" => view! {
@@ -240,7 +247,9 @@ pub fn ItemsList(
                                                     <EditableCell
                                                         value=item.custom_properties.get(&property_clone).cloned().unwrap_or_default()
                                                         on_input=move |value| update_item(index, &property_clone_for_closure, value)
-                                                        key=format!("custom-{}-{}", property_clone, index)
+                                                        key=Arc::new(format!("custom-{}-{}", property_clone, index))
+                                                        focused_cell=focused_cell
+                                                        set_focused_cell=set_focused_cell.clone()
                                                     />
                                                 </td>
                                             }