Menu: dx-state-focused class should not be added if focusStateEnabled… (#31495)

Co-authored-by: EugeniyKiyashko <[email protected]>

Author: anna-shakhova

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

@@ -24,6 +24,7 @@ import DOMComponent from './dom_component';
 import type { OptionChanged } from './types';
 
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
+export const ACTIVE_STATE_CLASS = 'dx-state-active';
 export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 
@@ -502,7 +503,7 @@ class Widget<
     event?: Record<string, unknown>,
   ): 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

@@ -33,7 +33,11 @@ import DataHelperMixin from '@js/data_helper';
 import type {
   Cancelable, DxEvent, EventInfo, ItemInfo,
 } 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 { focusable } from '@js/ui/widget/selectors';
 import { getPublicElement } from '@ts/core/m_element';
 import type { ActionConfig } from '@ts/core/widget/component';
@@ -531,7 +535,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/m_toolbar.menu.ts

@@ -228,7 +228,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, 'dxPopup', {
       onInitialized({ component }) {

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

@@ -15,6 +15,8 @@ import ariaAccessibilityTestHelper from '../../helpers/ariaAccessibilityTestHelp
 import { normalizeKeyName } from 'common/core/events/utils/index';
 import messageLocalization from 'common/core/localization/message';
 
+import { shouldSkipOnMobile } from '../../helpers/device.js';
+
 import 'generic_light.css!';
 import 'ui/validator';
 
@@ -932,6 +934,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({
@@ -6086,6 +6092,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

@@ -23,6 +23,7 @@ import Guid from 'core/guid';
 import browser from 'core/utils/browser';
 
 import { TextEditorLabel } from '__internal/ui/text_box/m_text_editor.label';
+import { shouldSkipOnMobile } from '../../helpers/device.js';
 
 import 'generic_light.css!';
 
@@ -2450,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');
 
@@ -2461,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);
@@ -8386,6 +8395,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

@@ -9,6 +9,8 @@ import { Event as dxEvent } from 'common/core/events';
 import { normalizeKeyName } from 'common/core/events/utils/index';
 import Quill from 'devextreme-quill';
 
+import { shouldSkipOnMobile } from '../../../helpers/device.js';
+
 const SUGGESTION_LIST_CLASS = 'dx-suggestion-list';
 const LIST_ITEM_CLASS = 'dx-list-item';
 const FOCUSED_STATE_CLASS = 'dx-state-focused';
@@ -445,6 +447,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 +466,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);
@@ -523,6 +533,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);
@@ -541,6 +555,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) {