TagBox: Should not scroll page after re-render when fieldTemplate is passed (T1259996) (DevExpress#29201)

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

Author: r-farkhutdinov

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -6,6 +6,7 @@ import { getPublicElement } from '@js/core/element';
 import Guid from '@js/core/guid';
 import $ from '@js/core/renderer';
 import { FunctionTemplate } from '@js/core/templates/function_template';
+import browser from '@js/core/utils/browser';
 import {
   noop,
   // @ts-expect-error
@@ -365,8 +366,19 @@ const DropDownEditor = TextBox.inherit({
         }
 
         this._integrateInput();
-        // @ts-expect-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');
+        }
       },
     });
   },

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

@@ -20,6 +20,7 @@ import TagBox from 'ui/tag_box';
 import { normalizeKeyName } from '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');