@linzjs/step-ag-grid 29.1.1 → 29.1.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.1",
+  "version": "29.1.3",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -101,7 +101,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
    * When pressing tab whilst editing the grid will select and edit the next cell if available.
    * Once the last cell to edit closes this callback is called.
    */
-  onBulkEditingComplete?: () => void;
+  onBulkEditingComplete?: () => Promise<void> | void;
 
   /**
    * Context menu definition if required.

package/src/components/GridCell.tsx

@@ -11,7 +11,8 @@ import {
   ValueFormatterParams,
   ValueGetterFunc,
 } from 'ag-grid-community';
-import { forwardRef, ReactElement, useContext } from 'react';
+import { defer } from 'lodash-es';
+import { forwardRef, ReactElement, useContext, useEffect } from 'react';
 
 import { GridPopoverContextProvider } from '../contexts/GridPopoverContextProvider';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
@@ -153,20 +154,25 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     sortable: true,
     resizable: true,
     valueSetter: custom?.editor ? blockValueSetter : undefined,
-    editable: props.editable ?? false,
-    ...(custom?.editor && {
-      cellClassRules: GridCellMultiSelectClassRules,
-      editable: props.editable ?? true,
-      cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
-    }),
+    editable: props.editable ?? !!custom?.editor,
+    ...(custom?.editor
+      ? {
+          cellClassRules: GridCellMultiSelectClassRules,
+          cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
+        }
+      : {
+          cellEditor: CellEditorToBlockEditing,
+        }),
     suppressKeyboardEvent: suppressCellKeyboardEvents,
-    ...(custom?.editorParams && {
-      cellEditorParams: {
-        ...custom.editorParams,
-        multiEdit: custom.multiEdit,
-        preventAutoEdit: custom.preventAutoEdit ?? false,
-      },
-    }),
+    ...(custom?.editorParams
+      ? {
+          cellEditorParams: {
+            ...custom.editorParams,
+            multiEdit: custom.multiEdit,
+            preventAutoEdit: custom.preventAutoEdit ?? !custom?.editor,
+          },
+        }
+      : { cellEditorParams: { preventAutoEdit: !custom?.editor } }),
     // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
     getQuickFilterText: filterValueGetter as any,
     // Default value formatter, otherwise react freaks out on objects
@@ -184,6 +190,20 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
   };
 };
 
+/**
+ * Ag-grid will start its own editor if editable is true and there is no cell editor
+ * like in the case of a cell that is editable because it triggers a modal.
+ * This will block that editor.
+ */
+const CellEditorToBlockEditing = ({ stopEditing }: { stopEditing: () => void }) => {
+  useEffect(() => {
+    defer(() => {
+      stopEditing();
+    });
+  }, [stopEditing]);
+  return <></>;
+};
+
 export interface CellEditorCommon {
   className?: string | undefined;
 }

package/src/components/GridPopoverHook.tsx

@@ -1,6 +1,5 @@
 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';
@@ -20,8 +19,14 @@ export interface GridPopoverHookProps<TData> {
   dontSaveOnExternalClick?: boolean;
 }
 
-export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopoverHookProps<TData>) => {
-  const { onBulkEditingComplete } = useGridContext<TData>();
+export const CancelPromise = () => Promise.resolve(true);
+
+export const useGridPopoverHook = <TData extends GridBaseRow>({
+  className,
+  save,
+  invalid,
+  dontSaveOnExternalClick,
+}: GridPopoverHookProps<TData>) => {
   const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
@@ -33,32 +38,26 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
   const triggerSave = useCallback(
     async (reason?: string) => {
       if (reason == CloseReason.CANCEL) {
+        await updateValue(CancelPromise, 0);
         stopEditing();
-        onBulkEditingComplete();
+
         return;
       }
-      if (props?.invalid?.()) {
+      if (invalid?.()) {
         // Don't close, don't do anything it's invalid
         return;
       }
 
-      if (!props.save) {
-        // No save method so just close
-        stopEditing();
-        onBulkEditingComplete();
-        return;
-      }
-
       if (
         await updateValue(
-          props.save,
+          save ?? (() => Promise.resolve(true)),
           reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
         )
       ) {
         stopEditing();
       }
     },
-    [onBulkEditingComplete, props, stopEditing, updateValue],
+    [invalid, save, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(
@@ -82,7 +81,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
               }}
               viewScroll={'auto'}
               dontShrinkIfDirectionIsTop={true}
-              className={props.className}
+              className={className}
             >
               {saving && ( // This is the overlay that prevents editing when the editor is saving
                 <div className={'ComponentLoadingWrapper-saveOverlay'} />
@@ -93,7 +92,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
                 data-reason={''}
                 onClick={(e) => {
                   let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;
-                  if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
+                  if (dontSaveOnExternalClick && reason === CloseReason.BLUR) {
                     reason = CloseReason.CANCEL;
                   }
                   void triggerSave(reason);
@@ -105,7 +104,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
         </>
       );
     },
-    [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave],
+    [anchorRef, isOpen, className, dontSaveOnExternalClick, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -32,7 +32,7 @@ interface FinalSelectOption<TOptionValue> {
 export const primitiveToSelectOption = <T,>(value: T): SelectOption<T> => {
   return {
     value: value,
-    label: value ? String(value) : '',
+    label: value ? String(value) : '-',
   };
 };
 
@@ -178,7 +178,14 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
     if (selectedItem === null) {
       if (props.onSelectFilter) {
         const { onSelectFilter } = props;
-        await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter as any });
+        if (!isEmpty(filter)) {
+          await onSelectFilter({
+            selectedRows,
+            selectedRowIds: selectedRows.map((row) => row.id),
+            value: filter as any,
+          });
+        }
+
         return true;
       } else {
         if (filteredValues && filteredValues.length === 1) {
@@ -230,7 +237,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
                     !props.onSelectFilter &&
                     !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent)
                   }
-                  onChange={(e) => setFilter(e.target.value)}
+                  onChange={(e) => setFilter(e.target.value.trim())}
                 />
                 {props.filterHelpText && isNotEmpty(filter) && (
                   <FormError error={null} helpText={props.filterHelpText} />

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -98,10 +98,14 @@ export const GridFormMultiSelect = <TData extends GridBaseRow>(props: GridFormMu
 
   const save = useCallback(
     async (selectedRows: TData[]): Promise<boolean> => {
-      if (!options || !props.onSave) return true;
+      if (!options || !props.onSave) {
+        return true;
+      }
 
       // Any changes to save?
-      if (initialValues === JSON.stringify(options)) return true;
+      if (initialValues === JSON.stringify(options)) {
+        return true;
+      }
 
       return props.onSave({
         selectedRows,
@@ -278,7 +282,9 @@ const FilterInput = (props: {
   }, [filter, headerGroups, options, setOptions]);
 
   const addCustomFilterValue = useCallback(() => {
-    if (!options || !onSelectFilter) return;
+    if (!options || !onSelectFilter) {
+      return;
+    }
 
     const filterTrimmed = filter.trim();
     if (isEmpty(filterTrimmed)) {
@@ -289,7 +295,9 @@ const FilterInput = (props: {
     const preFilterOptions = JSON.stringify(options);
     onSelectFilter({ filter: filterTrimmed, options });
     // Detect if options list changed and update
-    if (preFilterOptions === JSON.stringify(options)) return;
+    if (preFilterOptions === JSON.stringify(options)) {
+      return;
+    }
 
     setOptions([...options]);
     setFilter('');

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -15,6 +15,7 @@ export const GridPopoverMessage = <TData extends GridBaseRow, TValue = any>(
     },
     {
       editor: GridFormMessage,
+      preventAutoEdit: true,
       ...props,
     },
   );

package/src/contexts/GridContext.tsx

@@ -63,8 +63,8 @@ export interface GridContextType<TData extends GridBaseRow> {
   invisibleColumnIds: string[] | undefined;
   setInvisibleColumnIds: (colIds: string[]) => void;
   downloadCsv: (csvExportParams?: CsvExportParams) => void;
-  onBulkEditingComplete: () => void;
-  setOnBulkEditingComplete: (callback: (() => void) | undefined) => void;
+  onBulkEditingComplete: () => Promise<void> | void;
+  setOnBulkEditingComplete: (callback: (() => Promise<void> | void) | undefined) => void;
   showNoRowsOverlay: () => void;
 }
 

package/src/contexts/GridContextProvider.tsx

@@ -1,5 +1,12 @@
-import { CellPosition, ColDef, GridApi, IRowNode, RowNode } from 'ag-grid-community';
-import { CsvExportParams, ProcessCellForExportParams } from 'ag-grid-community';
+import {
+  CellPosition,
+  ColDef,
+  CsvExportParams,
+  GridApi,
+  IRowNode,
+  ProcessCellForExportParams,
+  RowNode,
+} from 'ag-grid-community';
 import debounce from 'debounce-promise';
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -8,6 +15,7 @@ import { ColDefT, GridBaseRow } from '../components';
 import { GridCellFillerColId, isGridCellFiller } from '../components/GridCellFiller';
 import { getColId, isFlexColumn } from '../components/gridUtil';
 import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from '../utils/util';
+import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';
 import { GridUpdatingContext } from './GridUpdatingContext';
 
@@ -494,8 +502,13 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
       try {
         // Edit in progress so don't edit until finished, timeout waiting after 5s
-        if (!(await waitForCondition(() => !anyUpdating(), 5000))) {
-          console.error("Could not start edit because previous edit hasn't finished after 5 seconds");
+        if (
+          !(await waitForCondition(
+            'startCellEditing failed as update still in progress, waited for 15 seconds',
+            () => !anyUpdating(),
+            15000,
+          ))
+        ) {
           return;
         }
 
@@ -521,11 +534,12 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         const rowIndex = rowNode.rowIndex;
         if (rowIndex != null) {
           defer(() => {
-            !gridApi.isDestroyed() &&
+            if (!gridApi.isDestroyed()) {
               gridApi.startEditingCell({
                 rowIndex,
                 colKey: colId,
               });
+            }
           });
         }
       } finally {
@@ -535,15 +549,18 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
   );
 
-  const bulkEditingCompleteCallbackRef = useRef<() => void>();
-  const onBulkEditingComplete = useCallback(() => {
+  const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>();
+  const onBulkEditingComplete = useCallback(async () => {
     resetFocusedCellAfterCellEditing();
-    bulkEditingCompleteCallbackRef.current?.();
+    await bulkEditingCompleteCallbackRef.current?.();
   }, [resetFocusedCellAfterCellEditing]);
 
-  const setOnBulkEditingComplete = useCallback((cellEditingCompleteCallback: (() => void) | undefined) => {
-    bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
-  }, []);
+  const setOnBulkEditingComplete = useCallback(
+    (cellEditingCompleteCallback: (() => Promise<void> | void) | undefined) => {
+      bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
+    },
+    [],
+  );
 
   /**
    * Returns true if an editable cell on same row was selected, else false.
@@ -577,8 +594,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         prePopupFocusedCell.current = undefined;
 
         const preRow = gridApi.getFocusedCell();
+        // If we don't do this ag-grid will do its own continuation of an edit on tab, we don't want that as
+        // we are managing it ourselves
+        gridApi.stopEditing();
         if (tabDirection === 1) {
-          gridApi.stopEditing();
           gridApi.tabToNextCell();
         } else {
           gridApi.tabToPreviousCell();
@@ -621,6 +640,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     ): Promise<boolean> => {
       try {
         setSaving?.(true);
+
         return await gridApiOp(async (gridApi) => {
           const selectedRows = props.selectedRows;
 
@@ -630,10 +650,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
             props.field ?? '',
             selectedRows.map((data) => data.id),
             async () => {
-              // MATT Disabled I don't believe these are needed anymore
-              // I've left them here just in case they are
               // Need to refresh to get spinners to work on all rows
-              // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+              gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
               ok = await fnUpdate(selectedRows).catch((ex) => {
                 console.error('Exception during modifyUpdating', ex);
                 return false;
@@ -641,23 +659,21 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
             },
           );
 
-          // MATT Disabled I don't believe these are needed anymore
-          // I've left them here just in case they are
           // async processes need to refresh their own rows
-          // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+          gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
 
           if (gridApi.isDestroyed()) {
             return ok;
           }
 
           if (ok) {
-            const cell = gridApi.getFocusedCell();
-            if (cell && gridApi.getFocusedCell() == null) {
-              !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
-            }
+            //const cell = gridApi.getFocusedCell();
+            //if (cell && gridApi.getFocusedCell() == null) {
+            //  !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+            // }
 
             // This is needed to trigger postSortRowsHook
-            gridApi.refreshClientSideRowModel();
+            !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
           }
 
           void (async () => {
@@ -670,10 +686,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
               prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
             ) {
               if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
-                onBulkEditingComplete();
+                await onBulkEditingComplete();
               }
             } else {
-              onBulkEditingComplete();
+              await onBulkEditingComplete();
             }
           })();
 
@@ -909,15 +925,3 @@ export const downloadCsvUseValueFormattersProcessCellCallback = (params: Process
   // We add an extra encodeToString here just in case valueFormatter is returning non string values
   return encodeToString(result);
 };
-
-const waitForCondition = async (condition: () => boolean, timeoutMs: number): Promise<boolean> => {
-  const endTime = Date.now() + timeoutMs;
-  while (Date.now() < endTime) {
-    if (condition()) {
-      return true;
-    }
-    await wait(100);
-  }
-  console.warn('waitForCondition failed');
-  return false;
-};

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './utils/deferredPromise';
 export * from './utils/textMatcher';
 export * from './utils/textValidator';
 export * from './utils/util';
+export * from './utils/waitForCondition';

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -30,7 +30,7 @@ export default {
   ],
 } as Meta<typeof Grid>;
 
-const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -49,7 +49,7 @@ interface ITestRow {
   position3: string | null;
 }
 
-const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridEditMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -39,7 +39,7 @@ interface ITestRow {
   position2: string | null;
 }
 
-const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -10,8 +10,7 @@ import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
   GridBaseRow,
-  GridContext,
-  GridContextType,
+  GridContextProvider,
   GridFormDropDown,
   GridFormDropDownProps,
   GridFormSubComponentTextInput,
@@ -51,14 +50,7 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as unknown as GridContextType<GridBaseRow>
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -77,7 +69,7 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
         >
           <GridFormDropDown {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -131,7 +123,7 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   // Test escape to not save
   updateValue.mockClear();
   await userEvent.type(textInput, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -9,7 +9,8 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  CancelPromise,
+  GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingCorrectionEditorParams,
@@ -28,14 +29,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -54,7 +48,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -93,7 +87,7 @@ GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingEditorParams,
@@ -28,14 +28,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -54,7 +47,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -93,7 +86,7 @@ GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -8,7 +8,12 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
-import { GridContext, GridFormMultiSelectGrid, GridFormMultiSelectGridProps, MultiSelectGridOption } from '../../..';
+import {
+  GridContextProvider,
+  GridFormMultiSelectGrid,
+  GridFormMultiSelectGridProps,
+  MultiSelectGridOption,
+} from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -42,14 +47,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -68,7 +66,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
         >
           <GridFormMultiSelectGrid {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };