DataGrid - Validation message is hidden if there is only one Master-Detail row and the row is collapsed (T1287261) (DevExpress#29876)

Co-authored-by: wdevfx <[email protected]>

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/common/validation/cellEditing.ts

@@ -92,3 +92,35 @@ fixture.disablePageReloads`Validation`
     await changeTheme(Themes.genericLight);
   });
 });
+
+test('DataGrid - Validation message is hidden if there is only one Master-Detail row and the row is collapsed (T1287261)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const cellToggle = dataGrid.getDataCell(0, 0).element;
+  const textCell = dataGrid.getDataCell(0, 2);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t
+    .click(textCell.element)
+    .selectText(textCell.getEditor().element)
+    .pressKey('backspace enter')
+    .click(cellToggle)
+    .click(cellToggle)
+    .click(textCell.element);
+
+  await t
+    .expect(await takeScreenshot('validation-message-shown-after-master-detail-collapse.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+  ],
+  keyExpr: 'ID',
+  columns: ['ID', {
+    dataField: 'Text',
+    validationRules: [{ type: 'required' }],
+  }],
+  editing: { mode: 'batch', allowUpdating: true },
+  masterDetail: { enabled: true },
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-message-shown-after-master-detail-collapse.png

@@ -2,7 +2,6 @@
 import positionUtils from '@js/common/core/animation/position';
 import { name as clickEventName } from '@js/common/core/events/click';
 import eventsEngine from '@js/common/core/events/core/events_engine';
-import pointerEvents from '@js/common/core/events/pointer';
 import { addNamespace, normalizeKeyName } from '@js/common/core/events/utils/index';
 import domAdapter from '@js/core/dom_adapter';
 import type { dxElementWrapper } from '@js/core/renderer';
@@ -41,7 +40,7 @@ const CONTENT_CLASS = 'content';
 const FOCUSED_ELEMENT_CLASS = 'dx-focused';
 const ROW_CLASS = 'dx-row';
 const MODULE_NAMESPACE = 'dxDataGridEditorFactory';
-const UPDATE_FOCUS_EVENTS = addNamespace([pointerEvents.down, 'focusin', clickEventName].join(' '), MODULE_NAMESPACE);
+const UPDATE_FOCUS_EVENTS = addNamespace([clickEventName, 'focusin'].join(' '), MODULE_NAMESPACE);
 const DX_HIDDEN = 'dx-hidden';
 
 interface EditorFactoryMixinType {

packages/devextreme/js/__internal/grids/grid_core/editor_factory/m_editor_factory.ts

@@ -1516,11 +1516,21 @@ export const validatingRowsViewExtender = (Base: ModuleType<RowsView>) => class
     super.updateFreeSpaceRowHeight($table);
 
     if ($tooltipContent && $tooltipContent.length) {
-      $rowElements = that._getRowElements();
+      $rowElements = that._getRowElements().filter(':visible');
       $freeSpaceRowElements = that._getFreeSpaceRowElements($table);
       $freeSpaceRowElement = $freeSpaceRowElements.first();
 
-      if ($freeSpaceRowElement && $rowElements.length === 1 && (!$freeSpaceRowElement.is(':visible') || getOuterHeight($tooltipContent) > getOuterHeight($freeSpaceRowElement))) {
+      const rowElementsHasFocusInside = $rowElements.find(':focus').length > 0;
+
+      if (
+        $freeSpaceRowElement
+        && $rowElements.length === 1
+        && (
+          !$freeSpaceRowElement.is(':visible')
+          || getOuterHeight($tooltipContent) > getOuterHeight($freeSpaceRowElement)
+        )
+        && rowElementsHasFocusInside
+      ) {
         $freeSpaceRowElements.show();
         setHeight($freeSpaceRowElements, getOuterHeight($tooltipContent));
         return true;