HDS-4273 Add integration test for testing select all on multiselect after model update, add example of updating model with fewer rows, refactor Table component code to update rows instead of deleting duplicates

Author: KristinLBradley

packages/components/src/components/hds/table/index.ts

@@ -300,6 +300,11 @@ export default class HdsTable extends Component<HdsTableSignature> {
     );
 
     if (selectionKey) {
+      // Remove any existing item with the same `selectionKey` identifier (this may occur if the model is updated and the rows re-rendered)
+      this._selectableRows = this._selectableRows.filter(
+        (row): boolean => row.selectionKey !== selectionKey
+      );
+      // Add the new item
       this._selectableRows.push({ selectionKey, checkbox });
     }
     this.setSelectAllState();
@@ -314,22 +319,6 @@ export default class HdsTable extends Component<HdsTableSignature> {
       this._selectableRows.map((row): string => row.selectionKey)
     );
 
-    // Fix for selectableRows state not being maintained properly when model updates:
-    // Delete the first row with the given selection key you find from the selectableRows array
-    // Search for the index of the row to delete. If found, delete it.
-    // (Fixes issue of not rows not being properly selectable including "select all" functionality)
-    const rowToDeleteIndex = this._selectableRows.findIndex(
-      (row): boolean => row.selectionKey === selectionKey
-    );
-
-    if (rowToDeleteIndex > -1) {
-      this._selectableRows.splice(rowToDeleteIndex, 1);
-    }
-
-    // ORIGINAL:
-    // this._selectableRows = this._selectableRows.filter(
-    //   (row): boolean => row.selectionKey !== selectionKey
-    // );
     this.setSelectAllState();
   }
 

showcase/app/controllers/components/table-multi-select-bug.js

@@ -35,6 +35,15 @@ export default class extends Controller {
       .sort(() => Math.random() - 0.5);
   }
 
+  @action dirtyModelWithLessRows() {
+    this.lyrics = this.lyrics
+      // Deep copy to destroy references
+      .map((r) => ({ ...r }))
+      // Randomly sort to see what happens in this case
+      .sort(() => Math.random() - 0.5)
+      .filter((row) => row.key !== 'five');
+  }
+
   printSelection = (selection) =>
     console.log('Printing selection:', selection.selectedRowsKeys);
 }

showcase/app/templates/components/table-multi-select-bug.hbs

@@ -22,7 +22,10 @@
 
   <Shw::Text::H2>This will work until you click the "Force new data" button</Shw::Text::H2>
 
-  <Hds::Button @text="Force new data" {{on "click" this.dirtyModel}} />
+  <p>
+    <Hds::Button @text="Force new data" {{on "click" this.dirtyModel}} @isInline={{true}} />
+    <Hds::Button @text="Force new data with fewer rows" {{on "click" this.dirtyModelWithLessRows}} @isInline={{true}} />
+  </p>
 
   <Hds::Table
     @model={{this.lyrics}}