[core] Add comment on why logic to sync column header (#13248)

mui · May 27, 2024 · d7d1cfd · d7d1cfd
1 parent 290c724
commit d7d1cfd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -408,6 +408,9 @@ export const useGridColumnResize = (
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width!);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
 
+      // Since during resizing we update the columns width outside of React, React is unable to
+      // reapply the right style properties. We need to sync the state manually.
+      // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
       const columnsState = gridColumnsStateSelector(apiRef.current.state);
       refs.groupHeaderElements!.forEach((element) => {
         const fields = getFieldsFromGroupHeaderElem(element);

diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts
@@ -72,8 +72,7 @@ export function findHeaderElementFromField(elem: Element, field: string): HTMLDi
 }
 
 export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString!.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields')!.slice(2, -2).split('-|-');
 }
 
 export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] {