feat(overlay): Add test

DevExpress · Oct 4, 2024 · af9b6f6 · af9b6f6
1 parent 287412e
commit af9b6f6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts b/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts
@@ -1164,8 +1164,6 @@ const Overlay: typeof OverlayInstance = Widget.inherit({
       case 'animation':
         break;
       case '_loopFocus':
-        this._toggleTabTerminator();
-        break;
       case 'shading':
         this._toggleShading(this.option('visible'));
         this._toggleSafariScrolling();

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
@@ -2942,6 +2942,7 @@ QUnit.module('keyboard navigation', {
         const instance = $element.dxLookup('instance');
         const tabKeyDownEvent = $.Event('keydown', { key: 'Tab' });
         const $overlayContent = $(instance.content()).parent();
+        // TODO: use getActiveElement
         const $cancelButton = $overlayContent.find(CANCEL_BUTTON_SELECTOR);
 
         $cancelButton.trigger(tabKeyDownEvent);
@@ -2964,6 +2965,7 @@ QUnit.module('keyboard navigation', {
         const instance = $element.dxLookup('instance');
         const tabKeyDownEvent = $.Event('keydown', { key: 'Tab', shiftKey: true });
         const $overlayContent = $(instance.content()).parent();
+        // TODO: use getActiveElement
         const $searchInput = $overlayContent.find(`.${LOOKUP_SEARCH_CLASS} .${TEXTEDITOR_INPUT_CLASS}`);
 
         $searchInput.trigger(tabKeyDownEvent);

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
@@ -3276,6 +3276,28 @@ testModule('focus policy', {
         assert.strictEqual(getActiveElement(), $firstTabbable.get(0), 'first item focused on press tab on last item (does not go under overlay)');
     });
 
+    test('focus in Overlay should be looped if _loopFocus: true and shading: false', function(assert) {
+        const overlay = new Overlay($('<div>').appendTo('#qunit-fixture'), {
+            visible: true,
+            shading: false,
+            _loopFocus: true,
+            contentTemplate: $('#focusableTemplate')
+        });
+        const $content = overlay.$content();
+
+        const $firstFocusableElement = $content.find('.firstTabbable');
+        const $lastFocusableElement = $content.find('.lastTabbable');
+
+        $lastFocusableElement.get(0).focus();
+        $($lastFocusableElement).trigger(this.tabEvent);
+
+        assert.strictEqual(getActiveElement(), $firstFocusableElement.get(0), 'first item is focused');
+
+        $($firstFocusableElement).trigger(this.shiftTabEvent);
+
+        assert.strictEqual(getActiveElement(), $lastFocusableElement.get(0), 'last item is focused');
+    });
+
     test('elements under overlay with shader have not to get focus by tab when top overlay has no tabbable elements', function(assert) {
         const overlay1 = new Overlay($('<div>').appendTo('#qunit-fixture'), {
             shading: true,