Overlay: Should focus next focusable element if target is deleted (T1248343) (DevExpress#29343)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

packages/devextreme/js/__internal/ui/overlay/m_overlay.ts

@@ -695,42 +695,43 @@ const Overlay: typeof OverlayInstance = Widget.inherit({
   _findTabbableBounds() {
     const $elements = this._$wrapper.find('*');
     const elementsCount = $elements.length - 1;
-    const result = { first: null, last: null };
 
-    for (let i = 0; i <= elementsCount; i++) {
-      if (!result.first && $elements.eq(i).is(tabbable)) {
-        result.first = $elements.eq(i);
-      }
+    let first = null;
+    let last = null;
 
-      if (!result.last && $elements.eq(elementsCount - i).is(tabbable)) {
-        result.last = $elements.eq(elementsCount - i);
+    for (let i = 0; i <= elementsCount; i += 1) {
+      if (!first && $elements.eq(i).is(tabbable)) {
+        first = $elements.eq(i);
+      }
+      if (!last && $elements.eq(elementsCount - i).is(tabbable)) {
+        last = $elements.eq(elementsCount - i);
       }
 
-      if (result.first && result.last) {
+      if (first && last) {
         break;
       }
     }
 
-    return result;
+    return { first, last };
   },
 
-  _tabKeyHandler(e) {
+  _tabKeyHandler(e: KeyboardEvent): void {
     if (normalizeKeyName(e) !== TAB_KEY || !this._isTopOverlay()) {
       return;
     }
 
-    const tabbableElements = this._findTabbableBounds();
+    const wrapper = this._$wrapper.get(0) as HTMLElement;
+    const activeElement = domAdapter.getActiveElement(wrapper);
+
+    const { first: $firstTabbable, last: $lastTabbable } = this._findTabbableBounds();
 
-    const $firstTabbable = tabbableElements.first;
-    const $lastTabbable = tabbableElements.last;
+    const isTabOnLast = !e.shiftKey && activeElement === $lastTabbable?.get(0);
+    const isShiftTabOnFirst = e.shiftKey && activeElement === $firstTabbable?.get(0);
+    const isOutsideTarget = !wrapper.contains(activeElement);
 
-    const isTabOnLast = !e.shiftKey && e.target === $lastTabbable.get(0);
-    const isShiftTabOnFirst = e.shiftKey && e.target === $firstTabbable.get(0);
-    const isEmptyTabList = tabbableElements.length === 0;
-    const isOutsideTarget = !contains(this._$wrapper.get(0), e.target);
+    const shouldPreventDefault = isTabOnLast || isShiftTabOnFirst || isOutsideTarget;
 
-    if (isTabOnLast || isShiftTabOnFirst
-            || isEmptyTabList || isOutsideTarget) {
+    if (shouldPreventDefault) {
       e.preventDefault();
 
       const $focusElement = e.shiftKey ? $lastTabbable : $firstTabbable;

packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js

@@ -3391,6 +3391,57 @@ testModule('focus policy', {
 
         assert.strictEqual(contentFocusHandler.callCount, 1, 'focus has been triggered once from keyboardMock');
     });
+
+    test('tab behavior should remain default when event.target is removed from DOM (T1248343)', function(assert) {
+        const overlay = new Overlay($('<div>').appendTo('#qunit-fixture'), {
+            visible: true,
+            shading: true,
+            contentTemplate: $('<div>')
+                .append('<input class="templateField">')
+                .append('<input class="anotherField">')
+                .append('<input class="thirdField">'),
+        });
+
+        const $content = $(overlay.$content());
+        const $templateField = $content.find('.templateField');
+        const $anotherField = $content.find('.anotherField');
+
+        $templateField.trigger('focus');
+
+        assert.strictEqual(getActiveElement(), $templateField.get(0), 'templatedField is focused');
+
+        $templateField.remove();
+
+        $anotherField.trigger('focus');
+
+        const tabEvent = $.Event('keydown', { key: 'Tab', shiftKey: false, target: $templateField.get(0) });
+
+        $(document).trigger(tabEvent);
+        assert.strictEqual(tabEvent.isDefaultPrevented(), false, 'event is not prevented');
+    });
+
+    test('tab event is prevented when removed target was outside overlay', function(assert) {
+        const overlay = new Overlay($('<div>').appendTo('#qunit-fixture'), {
+            visible: true,
+            shading: true,
+            contentTemplate: $('<div>')
+                .append('<input class="templateField">')
+        });
+
+        const $content = $(overlay.$content());
+        const $templateField = $content.find('.templateField');
+        const $outerField = $('<input class="outerField">').appendTo('#qunit-fixture');
+        $outerField.trigger('focus');
+        assert.strictEqual(getActiveElement(), $outerField.get(0), 'outerField is focused');
+
+        $outerField.remove();
+
+        const tabEventOutside = $.Event('keydown', { key: 'Tab', shiftKey: false, target: $outerField.get(0) });
+        $(document).trigger(tabEventOutside);
+
+        assert.strictEqual(tabEventOutside.isDefaultPrevented(), true, 'event is prevented when target removed outside overlay');
+        assert.strictEqual(getActiveElement(), $templateField.get(0), 'focus is returned to Popup');
+    });
 });
 
 testModule('preventScrollEvents', () => {