fix: the wrong tree rowKey is generated in case of multi grid instance (

#1478)

* fix: create tree rowKey with grid instance id

* chore: apply code review

packages/toast-ui.grid/src/grid.tsx

@@ -34,6 +34,7 @@ import {
   ModifiedDataManager,
   ModificationTypeCode,
 } from '@t/dataSource';
+import { OptExport } from '@t/store/export';
 import { createStore } from './store/create';
 import { Root } from './view/root';
 import { createDispatcher, Dispatch } from './dispatch/create';
@@ -72,7 +73,7 @@ import { sendHostname } from './helper/googleAnalytics';
 import { composeConditionFn, getFilterConditionFn } from './helper/filter';
 import { getFilterState } from './query/filter';
 import { execCopy } from './dispatch/clipboard';
-import { OptExport } from '@t/store/export';
+import { clearTreeRowKeyMap } from './store/helper/tree';
 
 /* eslint-disable global-require */
 if ((module as any).hot) {
@@ -1549,6 +1550,7 @@ export default class Grid implements TuiGrid {
    */
   public destroy() {
     render('', this.el, this.gridEl);
+    clearTreeRowKeyMap(this.store.id);
     for (const key in this) {
       if (hasOwnProp(this, key)) {
         delete this[key];

packages/toast-ui.grid/src/store/helper/tree.ts

@@ -1,6 +1,7 @@
-import { OptRow } from '../../../types/options';
-import { Row, RowKey } from '../../../types/store/data';
-import { Column } from '../../../types/store/column';
+import { GridId } from '@t/store';
+import { OptRow } from '@t/options';
+import { Row, RowKey } from '@t/store/data';
+import { Column } from '@t/store/column';
 import { createRawRow } from '../data';
 import { isExpanded, getDepth, isLeaf, isHidden } from '../../query/tree';
 import { observable, observe } from '../../helper/observable';
@@ -23,12 +24,22 @@ interface TreeDataCreationOption {
   disabled?: boolean;
 }
 
-let treeRowKey = -1;
+interface TreeRowKeyMap {
+  [id: number]: number;
+}
+
+const treeRowKeyMap: TreeRowKeyMap = {};
+
+export function clearTreeRowKeyMap(id: GridId) {
+  delete treeRowKeyMap[id];
+}
+
+function generateTreeRowKey(id: GridId) {
+  treeRowKeyMap[id] = treeRowKeyMap[id] ?? -1;
 
-function generateTreeRowKey() {
-  treeRowKey += 1;
+  treeRowKeyMap[id] += 1;
 
-  return treeRowKey;
+  return treeRowKeyMap[id];
 }
 
 function addChildRowKey(row: Row, childRow: Row) {
@@ -87,7 +98,7 @@ export function createTreeRawRow(
     row._leaf = true;
   }
   // generate new tree rowKey when row doesn't have rowKey
-  const targetTreeRowKey = isUndefined(row.rowKey) ? generateTreeRowKey() : Number(row.rowKey);
+  const targetTreeRowKey = isUndefined(row.rowKey) ? generateTreeRowKey(id) : Number(row.rowKey);
   const rawRow = createRawRow(id, row, targetTreeRowKey, column, {
     keyColumnName,
     lazyObservable,
@@ -151,7 +162,7 @@ export function createTreeRawData({
 }: TreeDataCreationOption) {
   // only reset the rowKey on lazy observable data
   if (lazyObservable) {
-    treeRowKey = -1;
+    treeRowKeyMap[id] = -1;
   }
 
   return flattenTreeData(id, data, null, column, {