@linzjs/step-ag-grid 29.16.0 → 30.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.16.0",
+  "version": "30.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,13 +28,13 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "~34.2.0",
-    "ag-grid-react": "~34.2.0",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
+    "ag-grid-community": "34.3.1",
+    "ag-grid-react": "34.3.1",
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
@@ -59,7 +59,8 @@
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "upgrade": "npx ncu -i --format group"
+    "upgrade": "npx ncu -i --format group",
+    "prepare": "husky"
   },
   "eslintConfig": {
     "extends": [
@@ -86,14 +87,14 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@linzjs/lui": "^24.3.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^8.3.0",
+    "@linzjs/windows": "^8.6.3",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.16",
-    "@storybook/react": "^9.1.16",
-    "@storybook/react-vite": "^9.1.16",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/addon-links": "^9.1.17",
+    "@storybook/react": "^9.1.17",
+    "@storybook/react-vite": "^9.1.17",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -106,15 +107,14 @@
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "34.2.0",
-    "ag-grid-react": "34.2.0",
     "babel-preset-react-app": "^10.1.0",
     "canvas": "^3.2.0",
     "chromatic": "^13.3.4",
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.16",
+    "eslint-plugin-storybook": "^9.1.17",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
@@ -133,7 +133,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.96.0",
     "sass-loader": "^16.0.6",
-    "storybook": "^9.1.16",
+    "storybook": "^9.1.17",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",

package/src/components/Grid.tsx

@@ -74,9 +74,11 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   enableClickSelection?: boolean;
   enableRangeSelection?: boolean;
   enableSelectionWithoutKeys?: boolean;
+  enableMultilineBulkEdit?: boolean;
   externalSelectedIds?: TData['id'][];
   externalSelectedItems?: TData[];
   hideSelectColumn?: boolean;
+  hideSelectedRow?: boolean;
   selectColumnPinned?: ColDef['pinned'];
   selectable?: boolean;
   setExternalSelectedIds?: (ids: TData['id'][]) => void;
@@ -85,7 +87,6 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   // ─── Editing ──────────────────────────────────────────────────
   onBulkEditingComplete?: () => Promise<void> | void;
   singleClickEdit?: boolean;
-  stopEditingWhenCellsLoseFocus?: boolean;
 
   // ─── Context Menu ─────────────────────────────────────────────
   contextMenu?: GridContextMenuComponent<TData>;
@@ -150,7 +151,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   // ─── Editing ──────────────────────────────────
   singleClickEdit = false,
-  stopEditingWhenCellsLoseFocus = false,
+  enableMultilineBulkEdit = false,
 
   // ─── Context Menu ─────────────────────────────
   contextMenuSelectRow = false,
@@ -500,11 +501,17 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
-      setApis(event.api, hasExternallySelectedItems, dataTestId);
+      setApis(event.api, hasExternallySelectedItems, enableMultilineBulkEdit, dataTestId);
       event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
-    [dataTestId, hasExternallySelectedItems, setApis, synchroniseExternallySelectedItemsToGrid],
+    [
+      dataTestId,
+      enableMultilineBulkEdit,
+      hasExternallySelectedItems,
+      setApis,
+      synchroniseExternallySelectedItemsToGrid,
+    ],
   );
 
   /**
@@ -556,6 +563,11 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onCellDoubleClick = useCallback(
     (event: CellDoubleClickedEvent) => {
+      const cellEditing = event.api.getEditingCells()?.[0];
+      if (cellEditing && cellEditing.colId === event.column.getColId() && cellEditing.rowIndex === event.rowIndex) {
+        // Ignore double click in already editing cell
+        return;
+      }
       const editable = fnOrVar(event.colDef?.editable, event);
       if (editable && !invokeEditAction(event)) {
         void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
@@ -657,19 +669,30 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onCellClicked = useCallback(
     (event: CellClickedEvent) => {
-      if (rangeStartRef.current && rangeEndRef.current) {
+      if (enableRangeSelection && rangeStartRef.current && rangeEndRef.current) {
         // This is to detect difference between a single click and a click drag return to cell.
-        if (rangeEndRef.current.timestamp - rangeStartRef.current.timestamp < 100) {
-          clearRangeSelection();
+        const maxDistanceBetweenC = Math.max(
+          Math.abs(rangeEndRef.current.clickLocation[0] - rangeStartRef.current.clickLocation[0]),
+          Math.abs(rangeEndRef.current.clickLocation[1] - rangeStartRef.current.clickLocation[1]),
+        );
+        if (maxDistanceBetweenC > 8) {
+          return;
         }
-        return;
+        clearRangeSelection();
       }
+
       const editable = fnOrVar(event.colDef?.editable, event);
       if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
+        const editingCell = event.api.getEditingCells()[0];
+        // If we are editing and single click we don't want the editing  to stop
+        if (editingCell && editingCell.colId === event.column.getColId() && editingCell.rowIndex === event.rowIndex) {
+          return;
+        }
+        event.api.setFocusedCell(event.rowIndex ?? 0, event.column.getColId(), event.rowPinned);
         void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
       }
     },
-    [clearRangeSelection, singleClickEdit, startCellEditing],
+    [clearRangeSelection, enableRangeSelection, singleClickEdit, startCellEditing],
   );
 
   /**
@@ -1020,6 +1043,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         'theme-specific',
         staleGrid && 'Grid-sortIsStale',
         gridReady && rowData && autoSized && 'Grid-ready',
+        params.hideSelectedRow && 'Grid-hideSelectedRow',
       )}
     >
       {contextMenuComponent}
@@ -1081,7 +1105,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
                 }
               : undefined
           }
-          stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus}
           selectionColumnDef={selectionColumnDef}
           suppressCellFocus={params.suppressCellFocus}
           suppressClickEdit={true}

package/src/components/GridPopoverHook.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 
+import { useGridContext } from '../contexts/GridContext';
 import { useGridPopoverContext } from '../contexts/GridPopoverContext';
 import { ControlledMenu } from '../react-menu3';
 import { MenuCloseEvent } from '../react-menu3/types';
@@ -27,6 +28,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
   invalid,
   dontSaveOnExternalClick,
 }: GridPopoverHookProps<TData>) => {
+  const { resetFocusedCellAfterCellEditing } = useGridContext<TData>();
   const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
@@ -40,7 +42,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
       if (reason == CloseReason.CANCEL) {
         await updateValue(CancelPromise, 0);
         stopEditing();
-
+        resetFocusedCellAfterCellEditing();
         return;
       }
       if (invalid?.()) {
@@ -55,9 +57,10 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
         )
       ) {
         stopEditing();
+        resetFocusedCellAfterCellEditing();
       }
     },
-    [invalid, save, stopEditing, updateValue],
+    [invalid, resetFocusedCellAfterCellEditing, save, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(

package/src/components/gridForm/GridFormInlineTextInput.tsx

@@ -0,0 +1,119 @@
+import clsx from 'clsx';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useGridContext } from '../../contexts/GridContext';
+import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
+import { CloseReason } from '../../react-menu3/utils';
+import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import { MaybePromise } from '../../utils/util';
+import { CellEditorCommon } from '../GridCell';
+import { useGridPopoverHook } from '../GridPopoverHook';
+import { GridBaseRow } from '../types';
+
+export interface GridFormInlineTextInput<TData extends GridBaseRow>
+  extends TextInputValidatorProps<TData>,
+    CellEditorCommon {
+  placeholder?: string;
+  units?: string;
+  onSave?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => MaybePromise<boolean>;
+  helpText?: string;
+}
+
+export const GridFormInlineTextInput = <TData extends GridBaseRow>(props: GridFormInlineTextInput<TData>) => {
+  const { onSave } = props;
+
+  const { getSelectedRows, prePopupOps } = useGridContext<TData>();
+  const { field, value: initialVale, data } = useGridPopoverContext<TData>();
+
+  const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
+  const [value, setValue] = useState(initValue);
+
+  const invalid = useCallback(() => TextInputValidator<TData>(props, value, data, {}), [data, props, value]);
+
+  useEffect(() => {
+    prePopupOps();
+  }, [prePopupOps]);
+
+  const save = useCallback(async (): Promise<boolean> => {
+    if (invalid()) {
+      return false;
+    }
+
+    const trimmedValue = value.trim();
+    // No change, so don't save
+    if (initValue === trimmedValue) {
+      return true;
+    }
+
+    if (!onSave) {
+      console.error(`No onSave handler for GridFormInlineTextInput "${String(field)}`);
+      return false;
+    }
+
+    const selectedRows = getSelectedRows<TData>();
+    const selectedRowIds = selectedRows.map((data) => data.id);
+
+    return onSave({
+      selectedRowIds,
+      selectedRows,
+      value: trimmedValue,
+    });
+  }, [invalid, value, initValue, onSave, getSelectedRows, field]);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+
+  const { triggerSave } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
+
+  const tabDirectionRef = useRef<string>(CloseReason.BLUR);
+
+  const tabRecorder = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Tab') {
+        tabDirectionRef.current = e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD;
+        e.preventDefault();
+        e.stopPropagation();
+        void triggerSave(tabDirectionRef.current);
+      }
+    },
+    [triggerSave],
+  );
+
+  useEffect(() => {
+    const input = inputRef.current;
+    input?.addEventListener('keydown', tabRecorder, { capture: true });
+    return () => {
+      input?.removeEventListener('keydown', tabRecorder, { capture: true });
+    };
+  }, [tabRecorder]);
+
+  return (
+    <div
+      className={clsx('GridFormInlineTextInput', invalid() && 'GridFormInlineTextInput-error')}
+      title={String(invalid() ?? '')}
+    >
+      <input
+        ref={inputRef}
+        type={'text'}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={props.placeholder ?? 'Type here'}
+        onBlur={() => {
+          void triggerSave(CloseReason.BLUR);
+        }}
+        onKeyUp={(e) => {
+          if (e.key === 'Enter') {
+            void triggerSave(CloseReason.BLUR);
+          }
+        }}
+      />
+    </div>
+  );
+};

package/src/components/gridForm/index.ts

@@ -1,5 +1,6 @@
 export * from './GridFormDropDown';
 export * from './GridFormEditBearing';
+export * from './GridFormInlineTextInput';
 export * from './GridFormMessage';
 export * from './GridFormMultiSelect';
 export * from './GridFormMultiSelectGrid';

package/src/components/gridHook/useGridContextMenu.tsx

@@ -45,7 +45,9 @@ export const useGridContextMenu = <TData extends GridBaseRow, Context extends ob
 
   const openMenu = useCallback(
     (e: PointerEvent | null | undefined) => {
-      if (!e) return;
+      if (!e) {
+        return;
+      }
       prePopupOps();
       setAnchorPoint({ x: e.clientX, y: e.clientY });
       setOpen(true);

package/src/components/gridHook/useGridCopy.ts

@@ -250,8 +250,11 @@ export const useGridCopy = <TData extends GridBaseRow>({
     });
 
   const rangeSelectInterceptContextMenu = useCallback(
-    (event: CellContextMenuEvent<TData>) =>
-      rangeStartRef.current == null ? cellContextMenu(event) : rangeSelectContextMenu(event),
+    (event: CellContextMenuEvent<TData>) => {
+      return hasSelectedMoreThanOneCellRef.current && rangeStartRef.current !== null
+        ? rangeSelectContextMenu(event)
+        : cellContextMenu(event);
+    },
     [cellContextMenu, rangeSelectContextMenu],
   );
 

package/src/components/gridHook/useGridRangeSelection.ts

@@ -1,5 +1,5 @@
 import { CellMouseDownEvent, CellMouseOverEvent, IRowNode } from 'ag-grid-community';
-import { MutableRefObject, RefObject, useCallback, useState } from 'react';
+import { MutableRefObject, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 
 import { GridBaseRow } from '../types';
@@ -7,7 +7,7 @@ import { GridBaseRow } from '../types';
 export interface CellLocation {
   rowId: string;
   colId: string;
-  timestamp: number;
+  clickLocation: [number, number];
 }
 
 export interface GridRanges<TData extends GridBaseRow> {
@@ -180,6 +180,26 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
     updateRangeSelectionCellClasses();
   }, [updateRangeSelectionCellClasses]);
 
+  const mouseDownRef = useRef<[number, number]>([0, 0]);
+  const trackMouseDown = useCallback((e: MouseEvent) => {
+    mouseDownRef.current = [e.screenX, e.screenY];
+  }, []);
+
+  const trackMouseUp = useCallback((e: MouseEvent) => {
+    if (rangeEndRef.current) {
+      rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', trackMouseDown, { capture: true });
+    document.addEventListener('mouseup', trackMouseUp, { capture: true });
+    return () => {
+      document.removeEventListener('mousemove', trackMouseDown, { capture: true });
+      document.removeEventListener('mouseup', trackMouseUp, { capture: true });
+    };
+  }, []);
+
   const onCellMouseOver = useCallback(
     (e: CellMouseOverEvent, mouseDown?: boolean) => {
       if (!enableRangeSelection) {
@@ -194,7 +214,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
       rangeEndRef.current = {
         rowId: e.node.data.id,
         colId: e.column.getColId(),
-        timestamp: Date.now(),
+        clickLocation: [0, 0],
       };
 
       if (mouseDown) {
@@ -202,7 +222,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
         e.api.forEachNodeAfterFilterAndSort((node: IRowNode<TData>) => sortedNodes.push(node));
         rangeSortedNodesRef.current = sortedNodes;
         setRefreshIntervalEnabled(true);
-        rangeStartRef.current = { ...rangeEndRef.current };
+        rangeStartRef.current = { ...rangeEndRef.current, clickLocation: mouseDownRef.current };
       }
 
       if (
@@ -211,6 +231,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
         (rangeStartRef.current.rowId !== rangeEndRef.current.rowId ||
           rangeStartRef.current.colId !== rangeEndRef.current.colId)
       ) {
+        e.api.stopEditing();
         hasSelectedMoreThanOneCellRef.current = true;
         window.getSelection()?.removeAllRanges();
       }

package/src/components/gridPopoverEdit/GridInlineTextInput.ts

@@ -0,0 +1,13 @@
+import { GenericCellEditorProps, GridCell } from '../GridCell';
+import { GridFormInlineTextInput } from '../gridForm/GridFormInlineTextInput';
+import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
+
+export const GridInlineTextInput = <TData extends GridBaseRow, TValue = any>(
+  colDef: GenericCellColDef<TData, TValue>,
+  params: GenericCellEditorProps<GridFormInlineTextInput<TData>>,
+): ColDefT<TData, TValue> =>
+  GridCell<TData, TValue, GridFormInlineTextInput<TData>>(colDef, {
+    editor: GridFormInlineTextInput,
+    ...params,
+  });

package/src/components/gridPopoverEdit/index.ts

@@ -1,5 +1,6 @@
 export * from './GridButton';
 export * from './GridEditBoolean';
+export * from './GridInlineTextInput';
 export * from './GridPopoutEditMultiSelect';
 export * from './GridPopoutEditMultiSelectGrid';
 export * from './GridPopoverEditBearing';

package/src/contexts/GridContext.tsx

@@ -27,7 +27,12 @@ export interface GridContextType<TData extends GridBaseRow> {
     filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
   ) => ColDefT<TData, any>[];
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-  setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => void;
+  setApis: (
+    gridApi: GridApi | undefined,
+    hasExternallySelectedItems: boolean,
+    enableMultilineBulkEdit: boolean,
+    dataTestId?: string,
+  ) => void;
   prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;

package/src/contexts/GridContextProvider.tsx

@@ -38,6 +38,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const hasExternallySelectedItemsRef = useRef(false);
+  const enableMultilineBulkEditRef = useRef(false);
   const idsBeforeUpdate = useRef<TData['id'][]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
@@ -120,8 +121,14 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Set the grid api when the grid is ready.
    */
   const setApis = useCallback(
-    (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => {
+    (
+      gridApi: GridApi | undefined,
+      hasExternallySelectedItems: boolean,
+      enableMultilineBulkEdit: boolean,
+      dataTestId?: string,
+    ) => {
       hasExternallySelectedItemsRef.current = hasExternallySelectedItems;
+      enableMultilineBulkEditRef.current = enableMultilineBulkEdit;
       testId.current = dataTestId;
       setGridApi(gridApi);
       gridApi?.setGridOption('quickFilterText', quickFilter);
@@ -164,6 +171,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     if (!gridApi || gridApi.isDestroyed()) {
       return;
     }
+
     prePopupFocusedCell.current = gridApi.getFocusedCell() ?? undefined;
   }, [gridApi]);
 
@@ -323,7 +331,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (flash) {
           delay(() => {
             try {
-              !gridApi.isDestroyed && gridApi.flashCells({ rowNodes });
+              !gridApi.isDestroyed() && gridApi.flashCells({ rowNodes });
             } catch {
               // ignore, flash cells sometimes throws errors as nodes have gone out of scope
             }
@@ -437,7 +445,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    */
   const autoSizeColumns = useCallback(
     async ({ skipHeader, colIds, userSizedColIds }: AutoSizeColumnsProps = {}): Promise<AutoSizeColumnsResult> => {
-      if (!gridApi || !gridApi.getColumnState()) {
+      if (!gridApi || gridApi.isDestroyed() || !gridApi.getColumnState()) {
         return null;
       }
 
@@ -445,7 +453,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
 
         const getVisibleColStates = () => {
-          const colStates = gridApi.getColumnState();
+          const colStates = gridApi.getColumnState() ?? [];
           return colStates.filter((colState) => {
             const colId = colState.colId;
             return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
@@ -522,9 +530,12 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     if (!gridApi || gridApi.isDestroyed() || startCellEditingInProgressRef.current) {
       return;
     }
-    if (prePopupFocusedCell.current) {
-      gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
-      prePopupFocusedCell.current = undefined;
+
+    const cellToFocus = prePopupFocusedCell.current;
+    if (cellToFocus) {
+      defer(() => {
+        gridApi.setFocusedCell(cellToFocus.rowIndex, cellToFocus.column);
+      });
     }
   }, [gridApi]);
 
@@ -607,9 +618,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
   const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>();
   const onBulkEditingComplete = useCallback(async () => {
-    resetFocusedCellAfterCellEditing();
     await bulkEditingCompleteCallbackRef.current?.();
-  }, [resetFocusedCellAfterCellEditing]);
+  }, []);
 
   const setOnBulkEditingComplete = useCallback(
     (cellEditingCompleteCallback: (() => Promise<void> | void) | undefined) => {
@@ -661,10 +671,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           return true;
         }
         const postRow = gridApi.getFocusedCell();
-        if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
-          // We didn't find an editable cell in the same row, or the cell column didn't change
-          // implying it was start/end of grid
-          break;
+        if (enableMultilineBulkEditRef.current) {
+          // Last cell in grid, nowhere to tab
+          if (preRow?.rowIndex === postRow?.rowIndex && preRow?.column === postRow?.column) {
+            break;
+          }
+        } else {
+          if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
+            // We didn't find an editable cell in the same row, or the cell column didn't change
+            // implying it was start/end of grid
+            break;
+          }
         }
 
         if (focusedCellIsEditable()) {

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -9,6 +9,7 @@ import {
   GridFilterColumnsMultiSelect,
 } from 'components/gridFilter/GridFilterColumnsMultiSelect';
 import { useMemo, useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import {
   ColDefT,
@@ -21,8 +22,15 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+import {
+  getNumberOfGridRows,
+  gridColumnValues,
+  waitForGridReady,
+  waitForGridRows,
+} from '../../utils/__tests__/storybookTestUtil';
+import { findQuick } from '../../utils/__tests__/testQuick';
 
 export default {
   title: 'Components / Grids',
@@ -124,4 +132,37 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
 };
 
 export const _FilterColumnsMultiSelectExample = GridFilterColumnsMultiSelectTemplate.bind({});
-_FilterColumnsMultiSelectExample.play = waitForGridReady;
+_FilterColumnsMultiSelectExample.play = async (context) => {
+  const { canvasElement } = context;
+  await waitForGridReady(context);
+  await waitForGridRows({ grid: canvasElement });
+
+  const setGridFilterAndCheckResultingRows = async (filterString: string, expected: string[] | null) => {
+    await filterGridUsingColumnFilter(filterString);
+    await wait(500);
+    if (expected !== null) {
+      expect(gridColumnValues('id', canvasElement)).toEqual(expected);
+      return;
+    }
+    await waitForGridReady(context);
+    expect(getNumberOfGridRows()).toEqual(0);
+  };
+
+  await setGridFilterAndCheckResultingRows('Tester', ['1001', '1002', '1004', '1005', '1006']);
+  await setGridFilterAndCheckResultingRows('Select All', ['1000', '1001', '1002', '1003', '1004', '1005', '1006']);
+  await setGridFilterAndCheckResultingRows('Select All', null); // Check that deselecting Select All filters out all rows
+};
+
+const filterGridUsingColumnFilter = async (filterString: string): Promise<void> => {
+  const user = userEvent.setup({
+    delay: 100,
+  });
+  const headerCellFilterButton = await findQuick({ classes: `.ag-header-cell-filter-button` });
+  await expect(headerCellFilterButton).toBeInTheDocument();
+  await user.click(headerCellFilterButton);
+  const canvas = within(document.body);
+  const regex = new RegExp(filterString, 'i'); // case‑insensitive
+  const filterCheckbox = await canvas.findByRole('checkbox', { name: regex });
+  await expect(filterCheckbox).toBeInTheDocument();
+  await user.click(filterCheckbox);
+};