🆕 Update width only if it isn't exactly the previous value

babel.config.json

@@ -14,6 +14,8 @@
   ],
   "plugins": [
     "@babel/transform-runtime",
+    "@babel/plugin-transform-nullish-coalescing-operator",
+    "@babel/plugin-transform-optional-chaining",
     ["optimize-clsx", { "functionNames": ["getCellClassname"] }]
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-grid",
-  "version": "7.0.0-beta.11",
+  "version": "7.0.0-beta.11-3",
   "license": "MIT",
   "description": "Feature-rich and customizable data grid React component",
   "keywords": [
@@ -98,7 +98,7 @@
     "react-dom": "^17.0.2",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.2.1",
-    "rollup": "^2.63.0",
+    "rollup": "^2.75.7",
     "rollup-plugin-postcss": "^4.0.2",
     "style-loader": "^3.3.1",
     "typescript": "~4.6.2",

src/DataGrid.tsx

@@ -69,6 +69,7 @@ interface EditCellState<R> extends Position {
   readonly mode: 'EDIT';
   readonly row: R;
   readonly originalRow: R;
+  readonly isMouseClick: boolean;
 }
 
 type DefaultColumnOptions<R, SR> = Pick<
@@ -430,7 +431,7 @@ function DataGrid<R, SR, K extends Key>(
   useImperativeHandle(ref, () => ({
     element: gridRef.current,
     scrollToColumn(idx: number) {
-      scrollToCell({ idx });
+      scrollToCell({ idx, rowIdx: lastSelectedRowIdx.current || 0 });
     },
     scrollToRow(rowIdx: number) {
       const { current } = gridRef;
@@ -689,7 +690,8 @@ function DataGrid<R, SR, K extends Key>(
         rowIdx,
         mode: 'EDIT',
         row,
-        originalRow: row
+        originalRow: row,
+        isMouseClick: false
       }));
     }
   }
@@ -726,7 +728,7 @@ function DataGrid<R, SR, K extends Key>(
 
     if (enableEditor && isCellEditable(position)) {
       const row = rows[position.rowIdx] as R;
-      setSelectedPosition({ ...position, mode: 'EDIT', row, originalRow: row });
+      setSelectedPosition({ ...position, mode: 'EDIT', row, originalRow: row, isMouseClick: true });
     } else if (isSamePosition(selectedPosition, position)) {
       // Avoid re-renders if the selected cell state is the same
       // TODO: replace with a #record? https://github.com/microsoft/TypeScript/issues/39831
@@ -970,6 +972,7 @@ function DataGrid<R, SR, K extends Key>(
         scrollToCell={() => {
           scrollToCell(selectedPosition);
         }}
+        isMouseClick={'isMouseClick' in selectedPosition && selectedPosition.isMouseClick}
       />
     );
   }

src/EditCell.tsx

@@ -40,6 +40,7 @@ export default function EditCell<R, SR>({
   column,
   colSpan,
   row,
+  isMouseClick,
   onRowChange,
   closeEditor,
   scrollToCell
@@ -119,7 +120,13 @@ export default function EditCell<R, SR>({
     >
       {column.editor != null && (
         <>
-          <column.editor column={column} row={row} onRowChange={onRowChange} onClose={onClose} />
+          <column.editor
+            column={column}
+            row={row}
+            onRowChange={onRowChange}
+            onClose={onClose}
+            isMouseClick={isMouseClick}
+          />
           {column.editorOptions?.renderFormatter && (
             <column.formatter column={column} row={row} isCellSelected onRowChange={onRowChange} />
           )}

src/hooks/useGridDimensions.ts

@@ -7,7 +7,8 @@ export function useGridDimensions(): [
   height: number
 ] {
   const gridRef = useRef<HTMLDivElement>(null);
-  const [gridWidth, setGridWidth] = useState(1);
+  // keep track of the old width and the new width to avoid twitching
+  const [gridWidth, setGridWidth] = useState([0, 1]);
   const [gridHeight, setGridHeight] = useState(1);
 
   useLayoutEffect(() => {
@@ -25,7 +26,18 @@ export function useGridDimensions(): [
       // TODO: remove once fixed upstream
       // we reduce width by 1px here to avoid layout issues in Chrome
       // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298
-      setGridWidth(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1));
+      setGridWidth((prev: number[]) => {
+        const newValue = clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1);
+
+        // If the new value is the same as the previous value, just ignore it.
+        // If we change back the value to the old one, we will end up with
+        // and infinite loop of twitching.
+        if (prev[0] === newValue) {
+          return prev;
+        }
+
+        return [prev[1], newValue];
+      });
       setGridHeight(clientHeight);
     }
 
@@ -38,5 +50,5 @@ export function useGridDimensions(): [
     };
   }, []);
 
-  return [gridRef, gridWidth, gridHeight];
+  return [gridRef, gridWidth[1], gridHeight];
 }

src/types.ts

@@ -94,6 +94,7 @@ export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
 export interface EditorProps<TRow, TSummaryRow = unknown> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   row: TRow;
+  isMouseClick: boolean;
   onRowChange: (row: TRow, commitChanges?: boolean) => void;
   onClose: (commitChanges?: boolean) => void;
 }
@@ -110,10 +111,10 @@ export interface HeaderRendererProps<TRow, TSummaryRow = unknown> {
 
 export interface CellRendererProps<TRow, TSummaryRow>
   extends Pick<
-      RowRendererProps<TRow, TSummaryRow>,
-      'onRowClick' | 'onRowDoubleClick' | 'selectCell'
-    >,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
+  RowRendererProps<TRow, TSummaryRow>,
+  'onRowClick' | 'onRowDoubleClick' | 'selectCell'
+  >,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   colSpan: number | undefined;
   row: TRow;
@@ -214,8 +215,8 @@ export interface SortIconProps {
 
 export interface CheckboxFormatterProps
   extends Pick<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'
   > {
   onChange: (checked: boolean, shift: boolean) => void;
 }