TreeView: selectAll checkBox should change value on enter key (#26374)

DevExpress · Dec 28, 2023 · 8ac5f7e · 8ac5f7e
1 parent bb8c3d9
commit 8ac5f7e
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 2 deletions.
diff --git a/packages/devextreme/js/ui/tree_view/ui.tree_view.base.js b/packages/devextreme/js/ui/tree_view/ui.tree_view.base.js
@@ -1214,6 +1214,7 @@ const TreeViewBase = HierarchicalCollectionWidget.inherit({
     },
 
     _renderSelectAllItem: function($container) {
+        const { selectAllText, focusStateEnabled } = this.option();
         $container = $container || this.$element().find(`.${NODE_CONTAINER_CLASS}`).first();
 
         this._$selectAllItem = $('<div>').addClass(SELECT_ALL_ITEM_CLASS);
@@ -1222,8 +1223,14 @@ const TreeViewBase = HierarchicalCollectionWidget.inherit({
         this._createComponent(this._$selectAllItem, CheckBox, {
             value: value,
             elementAttr: { 'aria-label': 'Select All' },
-            text: this.option('selectAllText'),
-            onValueChanged: this._onSelectAllCheckboxValueChanged.bind(this)
+            text: selectAllText,
+            focusStateEnabled,
+            onValueChanged: this._onSelectAllCheckboxValueChanged.bind(this),
+            onInitialized: ({ component }) => {
+                component.registerKeyHandler('enter', () => {
+                    component.option('value', !component.option('value'));
+                });
+            }
         });
 
         this._toggleSelectedClass(this._$selectAllItem, value);

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.checkboxes.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.checkboxes.tests.js
@@ -318,6 +318,88 @@ QUnit.test('checkbox should have aria-label="Check State" attribute', function(a
     assert.strictEqual($checkbox.attr('aria-label'), 'Check State');
 });
 
+QUnit.test('SelectAll checkBox should select all values on enter key when no items selected', function(assert) {
+    let selectAllValue = null;
+    const wrapper = new TreeViewTestWrapper({
+        showCheckBoxesMode: 'selectAll',
+        focusStateEnabled: true,
+        items: [ { text: 'item1', items: [ { text: 'item1_1' }, { text: 'item1_2' } ] } ],
+        onSelectAllValueChanged: ({ value }) => { selectAllValue = value; }
+    });
+    const $selectAll = wrapper.getElement().find(`.${SELECT_ALL_CHECKBOX_CLASS}`);
+
+    $selectAll.trigger($.Event('keydown', { key: 'enter' }));
+
+    assert.deepEqual(selectAllValue, true, 'all items selected');
+});
+
+QUnit.test('SelectAll checkBox should delect all values on enter key when all items selected', function(assert) {
+    let selectAllValue = null;
+    const wrapper = new TreeViewTestWrapper({
+        showCheckBoxesMode: 'selectAll',
+        focusStateEnabled: true,
+        items: [{ text: 'item1', selected: true, items: [ { text: 'item1_1' }, { text: 'item1_2' } ]
+        }],
+        onSelectAllValueChanged: ({ value }) => { selectAllValue = value; }
+    });
+    const $selectAll = wrapper.getElement().find(`.${SELECT_ALL_CHECKBOX_CLASS}`);
+
+    $selectAll.trigger($.Event('keydown', { key: 'enter' }));
+
+    assert.deepEqual(selectAllValue, false, 'all items deselected');
+});
+
+['click', 'enter'].forEach((scenario) => {
+    [
+        {
+            initialValue: undefined,
+            newValue: true,
+            items: [{ text: 'item1' }, { text: 'item2', selected: true }],
+        },
+        {
+            initialValue: false,
+            newValue: true,
+            items: [{ text: 'item1' }, { text: 'item2' }],
+        },
+        {
+            initialValue: true,
+            newValue: false,
+            items: [{ text: 'item1', selected: true }, { text: 'item2', selected: true }],
+        },
+    ].forEach(({ initialValue, newValue, items }) => {
+        QUnit.test(`Select all checkbox should change value from ${initialValue} to ${newValue} on ${scenario}`, function(assert) {
+            const wrapper = new TreeViewTestWrapper({
+                showCheckBoxesMode: 'selectAll',
+                focusStateEnabled: true,
+                items,
+            });
+            const $selectAll = wrapper.getElement().find(`.${SELECT_ALL_CHECKBOX_CLASS}`);
+            const selectAll = $selectAll.dxCheckBox('instance');
+
+            assert.strictEqual(selectAll.option('value'), initialValue, `initital value is ${initialValue}`);
+
+            if(scenario === 'click') {
+                $selectAll.trigger('dxclick');
+            } else {
+                $selectAll.trigger($.Event('keydown', { key: 'enter' }));
+            }
+
+            assert.strictEqual(selectAll.option('value'), newValue, `new value is ${initialValue}`);
+        });
+    });
+});
+
+QUnit.test('SelectAll checkBox should have the same focusStateEnabled as treeView', function(assert) {
+    const wrapper = new TreeViewTestWrapper({
+        showCheckBoxesMode: 'selectAll',
+        focusStateEnabled: false,
+        items: [{ text: 'item1' }],
+    });
+    const selectAllCheckBox = wrapper.getElement().find(`.${SELECT_ALL_CHECKBOX_CLASS}`).dxCheckBox('instance');
+
+    assert.deepEqual(selectAllCheckBox.option('focusStateEnabled'), false);
+});
+
 QUnit.test('Check value of the selectAllValueChanged event (T988753)', function(assert) {
     const selectAllValueChangedLog = [];
     const wrapper = new TreeViewTestWrapper({