TagBox: Should not scroll page after re-render when fieldTemplate is …

…passed (T1259996) (#29170) Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>
DevExpress · Mar 6, 2025 · 384dd37 · 384dd37
1 parent 1e828d0
commit 384dd37
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts
@@ -13,6 +13,7 @@ import type { DefaultOptionsRule } from '@js/core/options/utils';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { FunctionTemplate } from '@js/core/templates/function_template';
+import browser from '@js/core/utils/browser';
 import {
   // @ts-expect-error
   splitPair,
@@ -425,8 +426,19 @@ class DropDownEditor<
         }
 
         this._integrateInput();
-        // @ts-expect-error ts-error
-        isFocused && eventsEngine.trigger($input, 'focus');
+
+        if (!isFocused) {
+          return;
+        }
+
+        // T1259996
+        if (browser.mozilla) {
+          const inputElement = $input.get(0) as HTMLInputElement;
+          inputElement.focus({ preventScroll: true });
+        } else {
+          // @ts-expect-error
+          eventsEngine.trigger($input, 'focus');
+        }
       },
     });
   }

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
@@ -20,6 +20,7 @@ import TagBox from 'ui/tag_box';
 import { normalizeKeyName } from 'common/core/events/utils/index';
 import { getWidth, getHeight } from 'core/utils/size';
 import Guid from 'core/guid';
+import browser from 'core/utils/browser';
 
 import { TextEditorLabel } from '__internal/ui/text_box/m_text_editor.label';
 
@@ -5425,11 +5426,38 @@ QUnit.module('the \'fieldTemplate\' option', moduleSetup, () => {
             fieldTemplate: () => $('<div>').dxTextBox()
         }).dxTagBox('instance');
 
-        $tagBox.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS }`).trigger('dxclick');
+        $tagBox.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS}`).trigger('dxclick');
 
         assert.strictEqual(tagBox.option('value').length, 0);
         assert.strictEqual(tagBoxWithFieldTemplate.option('value').length, 1);
     });
+
+    QUnit.test('calls focus() with preventScroll: true when deleting a tag in Firefox (T1259996)', function(assert) {
+        if(!browser.mozilla) {
+            assert.ok(true, 'Only for Firefox');
+            return;
+        }
+
+        const items = Array.from({ length: 200 }, (_, i) => i + 1);
+
+        const focusSpy = sinon.spy(HTMLElement.prototype, 'focus');
+
+        const $tagBox = $('#tagBox').dxTagBox({
+            items,
+            value: items,
+            fieldTemplate: () => $('<div>').dxTextBox()
+        });
+
+        const $inputWrapper = $tagBox.find(`.${DROP_DOWN_EDITOR_INPUT_WRAPPER}`);
+
+        $inputWrapper.trigger('dxclick');
+        $tagBox.find(`.${TAGBOX_TAG_REMOVE_BUTTON_CLASS }`).trigger('dxclick');
+
+        assert.ok(focusSpy.calledTwice, 'focus() was called twice after click & deleting');
+        assert.deepEqual(focusSpy.args[1][0], { preventScroll: true }, 'focus() was called with preventScroll: true');
+
+        focusSpy.restore();
+    });
 });
 
 QUnit.module('the "customItemCreateEvent" option', {
@@ -8330,7 +8358,7 @@ QUnit.module('accessibility', () => {
     });
 
     QUnit.test('input should not have aria-labelledby attr if label is not specified', function(assert) {
-        const $tagBox = $('#tagBox').dxTagBox({ });
+        const $tagBox = $('#tagBox').dxTagBox({});
         const $input = $tagBox.find(`.${TEXTEDITOR_INPUT_CLASS}`);
 
         assert.strictEqual($input.attr('aria-labelledby'), undefined, 'aria-labelledby was set correctly');