TreeList and DataGrid always show the W1025 warning regardless of the…

… height option value or CSS limiting the component height (T1196939) (#25876)
DevExpress · Oct 31, 2023 · 48a79d4 · 48a79d4
1 parent 62c6d5c
commit 48a79d4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
@@ -916,7 +916,7 @@ class RowsView extends ColumnsView {
     that._scrollTop = 0;
     that._scrollLeft = -1;
     that._scrollRight = 0;
-    that._hasHeight = false;
+    that._hasHeight = undefined;
     that._contentChanges = [];
     dataController.loadingChanged.add((isLoading, messageText) => {
       that.setLoading(isLoading, messageText);

diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
@@ -485,8 +485,6 @@ const VirtualScrollingRowsViewExtender = (function () {
       const changeType = change && change.changeType;
       const d: any = Deferred();
 
-      this.throwHeightWarningIfNeed();
-
       const contentTable = contentElement.children().first();
       if (changeType === 'append' || changeType === 'prepend') {
         this.waitAsyncTemplates().done(() => {
@@ -749,7 +747,13 @@ const VirtualScrollingRowsViewExtender = (function () {
       this.callBase.call(this, isLoading, messageText);
     },
 
+    // NOTE: warning won't be thrown if height was specified and then removed,
+    // because for some reason `_hasHeight` is not updated properly in this case
     throwHeightWarningIfNeed() {
+      if (this._hasHeight === undefined) {
+        return;
+      }
+
       const needToThrow = !this._hasHeight && isVirtualPaging(this);
       if (needToThrow && !this._heightWarningIsThrown) {
         this._heightWarningIsThrown = true;
@@ -763,6 +767,8 @@ const VirtualScrollingRowsViewExtender = (function () {
 
       that.callBase();
 
+      this.throwHeightWarningIfNeed();
+
       if (that.component.$element() && !that._windowScroll && isElementInDom($element)) {
         that._windowScroll = subscribeToExternalScrollers($element, (scrollPos) => {
           if (!that._hasHeight && that._rowHeight) {

diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts
@@ -1,5 +1,6 @@
 import { ClientFunction, Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { removeStylesheetRulesFromPage, insertStylesheetRulesToPage } from '../../helpers/domUtils';
 import url from '../../helpers/getPageUrl';
 import createWidget from '../../helpers/createWidget';
 import DataGrid from '../../model/dataGrid';
@@ -1624,4 +1625,48 @@ test('Warning should be thrown if scrolling is virtual and height is not specifi
   scrolling: {
     mode: 'virtual',
   },
+  dataSource: [
+    { column: 'value' },
+  ],
+}));
+
+test('Warning should not be thrown if scrolling is virtual and height is specified with option', async (t) => {
+  const consoleMessages = await t.getBrowserConsoleMessages();
+  const warningExists = !!consoleMessages?.warn.find((message) => message.startsWith('W1025'));
+
+  await t.expect(warningExists).notOk();
+}).before(async () => createWidget('dxDataGrid', {
+  scrolling: {
+    mode: 'virtual',
+  },
+  dataSource: [
+    { column: 'value' },
+  ],
+  height: 200,
 }));
+
+['height', 'max-height'].forEach((cssOption) => {
+  test(`Warning should not be thrown if scrolling is virtual and height is specified with css (${cssOption})`, async (t) => {
+    const consoleMessages = await t.getBrowserConsoleMessages();
+    const warningExists = !!consoleMessages?.warn.find((message) => message.startsWith('W1025'));
+
+    await t.expect(warningExists).notOk();
+  }).before(async () => {
+    await insertStylesheetRulesToPage(`
+      #container {
+        ${cssOption}: 200px;
+      }
+    `);
+
+    await createWidget('dxDataGrid', {
+      scrolling: {
+        mode: 'virtual',
+      },
+      dataSource: [
+        { column: 'value' },
+      ],
+    });
+  }).after(async () => {
+    await removeStylesheetRulesFromPage();
+  });
+});