DataGrid - AI Column: Hide AIPromptEditor when resizing a column (#31654)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnResizing.functional.ts

@@ -218,3 +218,51 @@ test('DropDownButton should be hidden during resizing', async (t) => {
     { dataField: 'value', caption: 'Value' },
   ],
 }));
+
+test('AIPromptEditor should be hidden during resizing', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const aiDropDownButton = dataGrid
+    .getHeaders()
+    .getHeaderRow(0)
+    .getCommandCell(0)
+    .getAIDropDownButton();
+  const aiPromptEditor = dataGrid.getAIPromptEditor();
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(aiDropDownButton.element);
+
+  // assert
+  await t.expect(await aiDropDownButton.isOpened()).ok();
+
+  // act
+  await t.click((await aiDropDownButton.getList()).getItem(0).element);
+
+  // assert
+  await t.expect(aiPromptEditor.isVisible()).ok();
+
+  // act
+  await dataGrid.resizeHeader(1, 50);
+
+  // assert
+  await t.expect(aiPromptEditor.isVisible()).notOk();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'Name 1', value: 10 },
+    { id: 2, name: 'Name 2', value: 20 },
+    { id: 3, name: 'Name 3', value: 30 },
+  ],
+  allowColumnResizing: true,
+  columnWidth: 450,
+  columns: [
+    {
+      type: 'ai',
+      caption: 'AI Column',
+      name: 'myAIColumn',
+      alignment: 'right',
+    },
+    { dataField: 'id', caption: 'ID' },
+  ],
+}));

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_column_view.ts

@@ -175,12 +175,13 @@ export const columnHeadersViewExtender = (
 
     this.columnsResizer.resizeStarted.add(() => {
       /**
-       * We need to manually close the DropDownMenu button
+       * We need to manually close the DropDownMenu button and AIPromptEditor
        * because the stopPropagation method is called
        * when the cell resize is initiated.
        * Calling this method is necessary to fix bug T252661.
        */
       this.activeDropDownButtonInstance?.close();
+      this.aiPromptEditorController.hide();
     });
 
     this.aiColumnOptionChangedHandler = this.aiColumnOptionChanged.bind(this);

packages/devextreme/js/__internal/grids/grid_core/ai_column/m_ai_prompt_editor_view_controller.ts

@@ -15,4 +15,8 @@ export class AIPromptEditorViewController extends ViewController {
   ): Promise<boolean> {
     return this.aiPromptEditorView.show(cellElement, column);
   }
+
+  public hide(): Promise<boolean> {
+    return this.aiPromptEditorView.hide();
+  }
 }

packages/testcafe-models/dataGrid/aiPromptEditor.ts

@@ -0,0 +1,4 @@
+import Popup from '../popup';
+
+export class AIPromptEditor extends Popup {
+}

packages/testcafe-models/dataGrid/index.ts

@@ -21,6 +21,7 @@ import TextBox from '../textBox';
 import { GroupPanel } from './groupPanel';
 import GridCore from '../gridCore';
 import { CLASS as CLASS_BASE } from '../gridCore';
+import { AIPromptEditor } from './aiPromptEditor';
 
 export const CLASS = {
   ...CLASS_BASE,
@@ -72,6 +73,7 @@ export const CLASS = {
   columnsSeparator: 'dx-datagrid-columns-separator',
   toast: 'dx-toast-wrapper',
   dragHeader: 'drag-header',
+  aiPromptEditor: 'dx-ai-prompt-editor',
 };
 
 const E2E_ATTRIBUTES = {
@@ -939,4 +941,8 @@ export default class DataGrid extends GridCore {
   getDraggableHeader() {
     return this.body.find(`.${this.addWidgetPrefix(CLASS.dragHeader)}`);
   }
+
+  getAIPromptEditor(): AIPromptEditor {
+    return new AIPromptEditor(this.body.find(`.${CLASS.aiPromptEditor}`));
+  }
 }