21128: fixed select single item crash Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados-workbench2.git] / src / components / data-table / data-table.tsx

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 960b3c64b7bd6f5cab35e309e6e73a4cfc8fd24f..24cd91403aebce649c3f893814745daabfb7f139 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -157,20 +157,27 @@ export const DataTable = withStyles(styles)(
             }
         }
 
+        componentWillUnmount(): void {
+            this.initializeCheckedList([])
+        }
+
         checkBoxColumn: DataColumn<any, any> = {
             name: "checkBoxColumn",
             selected: true,
             configurable: false,
             filters: createTree(),
-            render: uuid => (
-                <input
-                    type="checkbox"
-                    name={uuid}
-                    className={this.props.classes.checkBox}
-                    checked={this.props.checkedList[uuid] ?? false}
-                    onChange={() => this.handleSelectOne(uuid)}
-                    onDoubleClick={ev => ev.stopPropagation()}></input>
-            ),
+            render: uuid => {
+                const { classes, checkedList } = this.props;
+                return (
+                    <input
+                        type="checkbox"
+                        name={uuid}
+                        className={classes.checkBox}
+                        checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
+                        onChange={() => this.handleSelectOne(uuid)}
+                        onDoubleClick={ev => ev.stopPropagation()}></input>
+                );
+            },
         };
 
         multiselectOptions: DataTableMultiselectOption[] = [
@@ -298,7 +305,6 @@ export const DataTable = withStyles(styles)(
             const { name, key, renderHeader, filters, sort } = column;
             const { onSortToggle, onFiltersChange, classes, checkedList } = this.props;
             const { isSelected } = this.state;
-            // const { isSelected, checkedList } = this.state;
             return column.name === "checkBoxColumn" ? (
                 <TableCell
                     key={key || index}