[yew-devel] [PATCH yew-widget-toolkit 1/2] fix #6382: widget: data table: prevent duplicate yew keys for rows

[Dominik Csapak <d.csapak@proxmox.com>]

yews diff algorithm assumes that elements in a list have unique keys, so
it can properly diff the new and old list. Our Store/Datastore does not
guarantee that records have unique keys.

For the data table rows, we used the record keys as yew keys, so in case
we generated duplicate entries in our datastore, we had duplicate keys
for yew, which in turn can panic.

To prevent that for the data table, prefix the record key with the index
into the store, the combination of which must be unique in this list.

Only using the row would not be enough though, otherwise yew would reuse
items even if they're unrelated. e.g. when the whole store content
changes.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/data_table/row.rs | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/widget/data_table/row.rs b/src/widget/data_table/row.rs
index 2770eb9..707ed31 100644
--- a/src/widget/data_table/row.rs
+++ b/src/widget/data_table/row.rs
@@ -80,7 +80,7 @@ impl<T: Clone + PartialEq + 'static> Component for PwtDataTableRow<T> {
         };
 
         let mut row = Container::from_tag("tr")
-            .key(props.record_key.clone())
+            .key(generate_key(&props))
             .attribute("role", "row")
             // aria-rowindex does not work, no firefox support?
             .attribute("aria-rowindex", (props.row_num + 1).to_string())
@@ -189,8 +189,13 @@ impl<T: Clone + PartialEq + 'static> Component for PwtDataTableRow<T> {
 
 impl<T: Clone + PartialEq + 'static> From<DataTableRow<T>> for VNode {
     fn from(val: DataTableRow<T>) -> Self {
-        let key = Some(val.record_key.clone());
+        let key = Some(generate_key(&val));
         let comp = VComp::new::<PwtDataTableRow<T>>(Rc::new(val), key);
         VNode::from(comp)
     }
 }
+
+// generate unique key from rownum + record key, since record key might not be unique
+fn generate_key<T: Clone + PartialEq>(row: &DataTableRow<T>) -> Key {
+    format!("{}-{}", row.row_num, row.record_key).into()
+}
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel