Menu: dx-state-focused class should not be added if focusStateEnabled is set to false (T1306949) (#31060)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/core/widget/widget.ts

@@ -27,6 +27,7 @@ import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor'
 
 export const WIDGET_CLASS = 'dx-widget';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
+export const ACTIVE_STATE_CLASS = 'dx-state-active';
 export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 export const HOVER_STATE_CLASS = 'dx-state-hover';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
@@ -527,7 +528,7 @@ class Widget<
     event?: DxEvent<PointerEvent | MouseEvent | TouchEvent>,
   ): void {
     this.option('isActive', value);
-    $element.toggleClass('dx-state-active', value);
+    $element.toggleClass(ACTIVE_STATE_CLASS, value);
   }
 
   _updatedHover(): void {

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -26,17 +26,21 @@ import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
 import { findTemplates } from '@js/core/utils/template_manager';
 import { isDefined, isFunction, isPlainObject } from '@js/core/utils/type';
 import type { DataSourceOptions } from '@js/data/data_source';
-import DataHelperMixin from '@js/data_helper';
 import type {
   Cancelable, DxEvent,
 } from '@js/events';
-import type { CollectionWidgetItem as CollectionWidgetItemProperties, CollectionWidgetOptions, ItemLike } from '@js/ui/collection/ui.collection_widget.base';
+import type {
+  CollectionWidgetItem as CollectionWidgetItemProperties,
+  CollectionWidgetOptions,
+  ItemLike,
+} from '@js/ui/collection/ui.collection_widget.base';
 import { getPublicElement } from '@ts/core/m_element';
 import { focusable } from '@ts/core/utils/m_selectors';
 import type { ActionConfig } from '@ts/core/widget/component';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys, WidgetProperties } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
+import DataHelperMixin from '@ts/data/m_data_helper';
 import type { ClickableCollectionWidgetItem, ItemClickEvent } from '@ts/ui/collection/item';
 import type CollectionItem from '@ts/ui/collection/item';
 import CollectionWidgetItem from '@ts/ui/collection/item';
@@ -563,7 +567,12 @@ class CollectionWidget<
     if ($target.length) {
       this._refreshActiveDescendant();
       this._refreshItemId($target, needCleanItemId);
-      this._toggleFocusClass(isFocused, $target);
+
+      const { focusStateEnabled } = this.option();
+
+      if (focusStateEnabled) {
+        this._toggleFocusClass(isFocused, $target);
+      }
     }
 
     this._updateParentActiveDescendant();

packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts

@@ -232,7 +232,11 @@ export default class DropDownMenu extends Widget<DropDownMenuProperties> {
     }
 
     this._$popup = $('<div>').appendTo(this.$element());
-    const { rtlEnabled, container, animation } = this.option();
+    const {
+      rtlEnabled,
+      container,
+      animation,
+    } = this.option();
 
     this._popup = this._createComponent(this._$popup, Popup, {
       onInitialized(e) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js

@@ -925,6 +925,10 @@ QUnit.module('functionality', moduleSetup, () => {
     });
 
     QUnit.test('the selected item should be focused after popup is opened', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const items = [1, 2, 3];
         const item = items[1];
         const selectBox = $('#selectBox').dxSelectBox({
@@ -6062,6 +6066,10 @@ QUnit.module('focus policy', {
     });
 
     QUnit.test('selectbox should not focus disabled item after the search', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         this.instance.option({
             searchEnabled: true,
             opened: true,

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js

@@ -2451,6 +2451,10 @@ QUnit.module('keyboard navigation', {
     }
 }, () => {
     QUnit.test('pagedown/pageup keys should move focus to last/first item', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const $listItems = getListItems(this.instance);
         this.keyboard.press('down');
 
@@ -2462,6 +2466,10 @@ QUnit.module('keyboard navigation', {
     });
 
     QUnit.test('down/up keys should move focus to next/previous item', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const $listItems = getListItems(this.instance);
         const $firstItem = $listItems.eq(0);
         const $secondItem = $listItems.eq(1);
@@ -8365,6 +8373,10 @@ QUnit.module('valueChanged should receive correct event parameter', {
 
         ['enter', 'space'].forEach(key => {
             QUnit.test(`on selectAll item selecting using ${key}`, function(assert) {
+                if(shouldSkipOnMobile(assert)) {
+                    return;
+                }
+
                 this.keyboard
                     .focus()
                     .press('down')

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionIntegration.tests.js

@@ -4,6 +4,7 @@ import 'ui/html_editor';
 
 import nativePointerMock from '../../../helpers/nativePointerMock.js';
 import { prepareEmbedValue } from './utils.js';
+import { shouldSkipOnMobile } from '../../../helpers/device.js';
 
 const { test, module } = QUnit;
 
@@ -384,6 +385,10 @@ export default function() {
         });
 
         test('first list item should be focused on filtering', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             const done = assert.async();
             const valueChangeSpy = sinon.spy(() => {
                 if(valueChangeSpy.calledOnce) {
@@ -644,6 +649,10 @@ export default function() {
         });
 
         test('aria-activedescendant should only exist on textbox when mention pops up', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             const done = assert.async();
             const valueChangeSpy = sinon.spy(() => {
                 if(valueChangeSpy.calledOnce) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionModule.tests.js

@@ -445,6 +445,10 @@ QUnit.module('Mentions module', moduleConfig, () => {
     });
 
     test('list shouldn\'t be focused on text input', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const mention = new Mentions(this.quillMock, this.options);
 
         mention.savePosition(0);
@@ -460,6 +464,10 @@ QUnit.module('Mentions module', moduleConfig, () => {
     });
 
     test('trigger \'arrow down\' should focus next list item', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const mention = new Mentions(this.quillMock, this.options);
 
         mention.savePosition(0);
@@ -522,6 +530,10 @@ QUnit.module('Mentions module', moduleConfig, () => {
     });
 
     test('trigger \'arrow up\' should focus previous list item', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const mention = new Mentions(this.quillMock, this.options);
 
         mention.savePosition(0);
@@ -540,6 +552,10 @@ QUnit.module('Mentions module', moduleConfig, () => {
     });
 
     test('trigger "arrow down" or "arrow up" does not change focused item in case data source is loading', function(assert) {
+        if(shouldSkipOnMobile(assert)) {
+            return;
+        }
+
         const mention = new Mentions(this.quillMock, this.options);
 
         mention.savePosition(0);

packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.menu.tests.js

@@ -578,21 +578,20 @@ QUnit.module('widget sizing render', moduleConfig, () => {
         });
 
         QUnit.test('navigation by arrows', function(assert) {
-            assert.expect(4);
-
             this.instance.option('opened', false);
             this.overflowMenu.$button().focusin();
 
             this.keyboard.keyDown('enter');
             assert.ok(this.overflowMenu.popup().option('visible'));
+
             this.keyboard.keyDown('down');
-            assert.ok(this.overflowMenu.$items().eq(0).hasClass(STATE_FOCUSED_CLASS), 'first item has focus class');
+            assert.ok(this.overflowMenu.$items().attr('id'), 'first item is active');
 
             this.keyboard.keyDown('down');
-            assert.ok(this.overflowMenu.$items().eq(1).hasClass(STATE_FOCUSED_CLASS), 'second item has focus class');
+            assert.ok(this.overflowMenu.$items().eq(1).attr('id'), 'second item is active');
 
             this.keyboard.keyDown('up');
-            assert.ok(this.overflowMenu.$items().eq(0).hasClass(STATE_FOCUSED_CLASS), 'first item has focus class');
+            assert.ok(this.overflowMenu.$items().eq(0).attr('id'), 'third item is active');
         });
 
         QUnit.test('hide popup on press tab', function(assert) {