TreeList: Fix the "Uncaught TypeError: this.callBase is not a functio…

…n" error occurs with the disabled cacheEnabled option (T1196887) (#25948) Co-authored-by: Alyar <>
DevExpress · Nov 6, 2023 · 7c1b357 · 7c1b357
1 parent 1d44c1a
commit 7c1b357
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts b/packages/devextreme/js/__internal/grids/tree_list/selection/m_selection.ts
@@ -195,11 +195,12 @@ treeListCore.registerModule('selection', extend(true, {}, selectionModule, {
 
         changeItemSelection(itemIndex, keyboardKeys) {
           const isRecursiveSelection = this.isRecursiveSelection();
+          const callBase = this.callBase.bind(this);
 
           if (isRecursiveSelection && !keyboardKeys.shift) {
             const key = this._dataController.getKeyByRowIndex(itemIndex);
             return this.selectedItemKeys(key, true, this.isRowSelected(key)).done(() => {
-              this.isRowSelected(key) && this.callBase(itemIndex, keyboardKeys, true);
+              this.isRowSelected(key) && callBase(itemIndex, keyboardKeys, true);
             });
           }
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/selection.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/selection.tests.js
@@ -1718,5 +1718,48 @@ QUnit.module('Recursive selection', {
         assert.strictEqual(items[0].isSelected, undefined, 'selection state of the first item is indeterminate');
         assert.strictEqual($(this.rowsView.getRowElement(0)).attr('aria-selected'), 'undefined', 'aria-selected attr with \'undefined\' value');
     });
+
+    // T1196887
+    QUnit.test('No exceptions on deselect -> select row when cacheEnabled = false', function(assert) {
+        // arrange
+        const $testElement = $('#treeList');
+        const clock = sinon.useFakeTimers();
+
+        this.options.itemsExpr = 'items';
+        this.options.loadingTimeout = 30;
+        this.options.cacheEnabled = false;
+        this.options.dataStructure = 'tree';
+        this.options.dataSource = new Array(100)
+            .fill(null)
+            .map((_, i) => {
+                return {
+                    id: i + 1,
+                    text: `test${i}`,
+                    items: [{ id: i + 101, text: `test${i + 101}` }]
+                };
+            });
+        this.options.selectedRowKeys = new Array(100).fill(null).map((_, index) => index + 1);
+        this.setupTreeList();
+        clock.tick(100);
+        this.rowsView.render($testElement);
+
+        // assert
+        assert.ok(this.selectionController.isSelectAll(), 'select all state');
+
+        try {
+            // act
+            this.selectionController.changeItemSelection(0, {});
+            clock.tick(100);
+            this.selectionController.changeItemSelection(0, {});
+            clock.tick(100);
+
+            // assert
+            assert.ok(this.selectionController.isSelectAll(), 'select all state');
+        } catch(e) {
+            assert.ok(false, 'exception');
+        } finally {
+            clock.restore();
+        }
+    });
 });