DataGrid - TagBox tags are incorrectly rendered if the Material/Fluen…

…t theme is used (T1228720) (#27810)

Signed-off-by: tongsonbarbs <[email protected]>

e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { changeTheme } from '../../helpers/changeTheme';
+import { Themes } from '../../helpers/themes';
+
+fixture.disablePageReloads`Tagbox Columns`.page(
+  url(__dirname, '../container.html'),
+);
+// T1228720
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach(
+  (theme) => {
+    test('Datagrid tagbox column should not look broken', async (t) => {
+      const dataGrid = new DataGrid('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+      await t
+        .click(dataGrid.getDataCell(0, 1).element)
+        .expect(
+          await takeScreenshot(
+            `T1228720-grid-tagbox-on-edit_(${theme}).png`,
+            dataGrid.element,
+          ),
+        )
+        .ok()
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    })
+      .before(async () => {
+        await changeTheme(theme);
+        await createWidget('dxDataGrid', {
+          showBorders: true,
+          allowColumnResizing: true,
+          dataSource: [{ id: 1, items: [1, 2, 3, 4, 5] }],
+          columns: [
+            'id',
+            {
+              dataField: 'items',
+              editCellTemplate(container, cellInfo) {
+                ($('<div/>') as any)
+                  .dxTagBox({
+                    dataSource: Array.from({ length: 10 }, (_, index) => ({
+                      id: index + 1,
+                      text: `item ${index + 1}`,
+                    })),
+                    value: cellInfo.value,
+                    valueExpr: 'id',
+                    displayExpr: 'text',
+                    onValueChanged(e) {
+                      cellInfo.setValue(e.value);
+                    },
+                    onSelectionChanged() {
+                      cellInfo.component.updateDimensions();
+                    },
+                    searchEnabled: true,
+                  })
+                  .appendTo(container);
+              },
+            },
+          ],
+          editing: { mode: 'batch', allowUpdating: true },
+        });
+      })
+      .after(async () => {
+        await changeTheme(Themes.genericLight);
+      });
+  },
+);

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -84,19 +84,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
     }
 
-    .dx-editor-with-menu {
+    .dx-#{$widget-name}-filter-row .dx-editor-with-menu {
       .dx-menu-item-content {
         display: flex;
         justify-content: center;
         align-items: center;
-
-        .dx-icon {
-          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
-
-          &.dx-icon-filter-operation-default {
-            margin-top: 2px;
-          }
-        }
       }
 
       .dx-texteditor {
@@ -440,7 +432,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         box-shadow: none;
       }
 
-      .dx-texteditor-input {
+      &:not(.dx-tagbox) .dx-texteditor-input {
         background: $datagrid-editor-bg;
         font-size: $fluent-grid-base-cell-font-size;
         height: $fluent-grid-base-cell-height;
@@ -466,7 +458,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         }
       }
 
-      .dx-tag-container {
+      &:not(.dx-tagbox) .dx-tag-container {
         min-height: $fluent-grid-base-cell-height;
         padding: 0;
       }

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -74,19 +74,11 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
     }
 
-    .dx-editor-with-menu {
+    .dx-#{$widget-name}-filter-row .dx-editor-with-menu {
       .dx-menu-item-content {
         display: flex;
         justify-content: center;
         align-items: center;
-
-        .dx-icon {
-          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
-
-          &.dx-icon-filter-operation-default {
-            margin-top: 2px;
-          }
-        }
       }
 
       .dx-texteditor {
@@ -418,7 +410,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         box-shadow: none;
       }
 
-      .dx-texteditor-input {
+      &:not(.dx-tagbox) .dx-texteditor-input {
         background: $datagrid-editor-bg;
         font-size: $material-grid-base-cell-font-size;
         height: $material-grid-base-cell-height;
@@ -444,7 +436,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         }
       }
 
-      .dx-tag-container {
+      &:not(.dx-tagbox) .dx-tag-container {
         min-height: $material-grid-base-cell-height;
         padding: 0;
       }