T1329677 DataGrid - Column width changes are not applied immediately

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

@@ -59,6 +59,68 @@ test('DataGrid – Resize indicator is moved when resizing a grouped column if s
   });
 });
 
+// T1329677
+test('DataGrid - column width changed via columnOption should be applied immediately, without a repaint (T1329677)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.apiColumnOption('Task_Assigned_Employee_ID', 'width', 700);
+
+  const assignedColumnWidth = await dataGrid.getHeaders().getHeaderRow(0)
+    .getHeaderCell(1).element.clientWidth;
+
+  await t
+    .expect(assignedColumnWidth)
+    .within(
+      700 - 1,
+      700 + 1,
+      'columnOption width should be applied immediately, without an explicit repaint',
+    );
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{ Task_Subject: 'Test' }],
+    columnAutoWidth: true,
+    columns: [
+      { dataField: 'Task_Subject' },
+      { dataField: 'Task_Assigned_Employee_ID', caption: 'Assigned' },
+    ],
+  });
+});
+
+// T1329677
+test('DataGrid - other column width should be updated immediately when another column width is changed via columnOption (T1329677)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  const firstColumnOldWidth = await dataGrid.getDataCell(0, 0).element.clientWidth;
+
+  await dataGrid.apiColumnOption('Col2', 'width', 200);
+
+  const firstColumnNewWidth = await dataGrid.getDataCell(0, 0).element.clientWidth;
+
+  await t
+    .expect(firstColumnOldWidth).notEql(firstColumnNewWidth, 'first column width should be changed');
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      Col1: 'Test 1',
+      Col2: 'Test 2',
+      Col3: 'Test 3',
+      Col4: 'Test 4',
+    }],
+    width: 400,
+    columnAutoWidth: true,
+    columns: [
+      { dataField: 'Col1' },
+      { dataField: 'Col2' },
+      { dataField: 'Col3' },
+      { dataField: 'Col4' },
+    ],
+  });
+});
+
 const tryResizeHeaderInBandArea = (
   dataGrid: DataGrid,
   columnIndex: number,

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller_utils.ts

@@ -710,6 +710,28 @@ export const fireOptionChanged = function (that: ColumnsController, options) {
   }
 };
 
+const isVisibleWidthChangePendingForColumn = (that: ColumnsController, columnIndex): boolean => {
+  const columnChanges = that._columnChanges;
+
+  if (!columnChanges?.optionNames?.visibleWidth) {
+    return false;
+  }
+
+  return columnChanges.columnIndex === columnIndex
+    || !!columnChanges.columnIndices?.includes(columnIndex);
+};
+
+const invalidateStaleVisibleWidths = (that: ColumnsController): void => {
+  that._columns.forEach((column) => {
+    const shouldInvalidateVisibleWidth = isDefined(column.visibleWidth)
+      && !isVisibleWidthChangePendingForColumn(that, column.index);
+
+    if (shouldInvalidateVisibleWidth) {
+      column.visibleWidth = null;
+    }
+  });
+};
+
 export const columnOptionCore = function (that: ColumnsController, column, optionName, value?, notFireEvent?) {
   const optionGetter = compileGetter(optionName);
   const columnIndex = column.index;
@@ -735,6 +757,10 @@ export const columnOptionCore = function (that: ColumnsController, column, optio
       changeType = 'columns';
     }
 
+    if (optionName === 'width') {
+      invalidateStaleVisibleWidths(that);
+    }
+
     const optionSetter = compileSetter(optionName);
     // @ts-expect-error
     optionSetter(column, value, { functionsAsIs: true });

packages/devextreme/js/__internal/grids/grid_core/m_utils.ts

@@ -70,6 +70,11 @@ export function isDateType(dataType: string | undefined): boolean {
   return dataType === 'date' || dataType === 'datetime';
 }
 
+export interface SelectionRange {
+  selectionStart: number;
+  selectionEnd: number;
+}
+
 const getIntervalSelector = function () {
   const data = arguments[1];
   const value = this.calculateCellValue(data);
@@ -562,22 +567,25 @@ export default {
 
   isDateType,
 
-  getSelectionRange(focusedElement) {
+  getSelectionRange(focusedElement): SelectionRange {
     try {
       if (focusedElement) {
         return {
-          selectionStart: focusedElement.selectionStart,
-          selectionEnd: focusedElement.selectionEnd,
+          selectionStart: isNumeric(focusedElement.selectionStart) ? focusedElement.selectionStart : -1,
+          selectionEnd: isNumeric(focusedElement.selectionEnd) ? focusedElement.selectionEnd : -1,
         };
       }
     } catch (e) { /* empty */ }
 
-    return {};
+    return {
+      selectionStart: -1,
+      selectionEnd: -1,
+    };
   },
 
-  setSelectionRange(focusedElement, selectionRange) {
+  setSelectionRange(focusedElement, selectionRange: SelectionRange): void {
     try {
-      if (focusedElement && focusedElement.setSelectionRange) {
+      if (focusedElement && focusedElement.setSelectionRange && selectionRange.selectionStart >= 0 && selectionRange.selectionEnd >= 0) {
         focusedElement.setSelectionRange(selectionRange.selectionStart, selectionRange.selectionEnd);
       }
     } catch (e) { /* empty */ }