@linzjs/step-ag-grid 29.1.2 → 29.1.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.2",
+  "version": "29.1.4",
   "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,13 +19,14 @@ export interface GridPopoverHookProps<TData> {
   dontSaveOnExternalClick?: boolean;
 }
 
+export const CancelPromise = () => Promise.resolve(true);
+
 export const useGridPopoverHook = <TData extends GridBaseRow>({
   className,
   save,
   invalid,
   dontSaveOnExternalClick,
 }: GridPopoverHookProps<TData>) => {
-  const { onBulkEditingComplete, redrawRows } = useGridContext<TData>();
   const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
@@ -38,9 +38,9 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
   const triggerSave = useCallback(
     async (reason?: string) => {
       if (reason == CloseReason.CANCEL) {
+        await updateValue(CancelPromise, 0);
         stopEditing();
-        onBulkEditingComplete();
-        redrawRows();
+
         return;
       }
       if (invalid?.()) {
@@ -48,22 +48,16 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
         return;
       }
 
-      if (!save) {
-        // No save method so just close
-        stopEditing();
-        onBulkEditingComplete();
-        redrawRows();
-        return;
-      }
-
       if (
-        await updateValue(save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)
+        await updateValue(
+          save ?? (() => Promise.resolve(true)),
+          reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+        )
       ) {
         stopEditing();
-        redrawRows();
       }
     },
-    [invalid, onBulkEditingComplete, redrawRows, save, stopEditing, updateValue],
+    [invalid, save, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(
@@ -116,5 +110,6 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
   return {
     popoverWrapper,
     triggerSave,
+    gridPopoverOpen: isOpen,
   };
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -5,6 +5,7 @@ import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useSta
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { FormError } from '../../lui/FormError';
+import { usePrevious } from '../../lui/reactUtils';
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
@@ -32,7 +33,7 @@ interface FinalSelectOption<TOptionValue> {
 export const primitiveToSelectOption = <T,>(value: T): SelectOption<T> => {
   return {
     value: value,
-    label: value ? String(value) : '',
+    label: value ? String(value) : '-',
   };
 };
 
@@ -84,6 +85,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
   props: GridFormDropDownProps<TData, TOptionValue>,
 ) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
+  const { onSelectFilter, options: propOptions, onSelectedItem } = props;
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
@@ -101,8 +103,8 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
         selectedRows.some((row) => row[field] !== value) ||
         (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
-        if (props.onSelectedItem) {
-          await props.onSelectedItem({
+        if (onSelectedItem) {
+          await onSelectedItem({
             selectedRows,
             selectedRowIds: selectedRows.map((row) => row.id),
             value,
@@ -114,23 +116,78 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
       }
       return true;
     },
-    [field, props, selectedRows],
+    [field, onSelectedItem, selectedRows],
   );
 
+  /**
+   * Saves are wrapped in updateValue and triggered by blur events
+   */
+  const save = useCallback(async () => {
+    if (!options) {
+      return true;
+    }
+
+    // Filter saved
+    if (selectedItem === null) {
+      if (onSelectFilter) {
+        if (!isEmpty(filter)) {
+          await onSelectFilter({
+            selectedRows,
+            selectedRowIds: selectedRows.map((row) => row.id),
+            value: filter as any,
+          });
+        }
+
+        return true;
+      } else {
+        if (filteredValues && filteredValues.length === 1) {
+          if (filteredValues[0].subComponent) return false;
+          return await selectItemHandler(filteredValues[0].value, null);
+        }
+      }
+      return false;
+    }
+    if (selectedItem.subComponent && !subComponentIsValid.current) {
+      return false;
+    }
+    await selectItemHandler(selectedItem.value, subSelectedValue);
+
+    return true;
+  }, [
+    filter,
+    filteredValues,
+    onSelectFilter,
+    options,
+    selectItemHandler,
+    selectedItem,
+    selectedRows,
+    subSelectedValue,
+  ]);
+
+  const { popoverWrapper, gridPopoverOpen } = useGridPopoverHook({
+    className: props.className,
+    invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
+    save,
+    dontSaveOnExternalClick: true,
+  });
+
   // Load up options list if it's async function
+  const prevIsOpen = usePrevious(gridPopoverOpen);
+  const prevFilter = usePrevious(filter);
   useEffect(() => {
-    if (options) return;
-    let optionsConf = props.options;
+    if ((gridPopoverOpen !== prevIsOpen || filter !== prevFilter) && gridPopoverOpen) {
+      let optionsConf = propOptions;
 
-    void (async () => {
-      if (typeof optionsConf === 'function') {
-        optionsConf = await optionsConf(selectedRows, filter);
-      }
-      if (optionsConf !== undefined) {
-        setOptions(optionsConf);
-      }
-    })();
-  }, [filter, options, props, selectedRows]);
+      void (async () => {
+        if (typeof optionsConf === 'function') {
+          optionsConf = await optionsConf(selectedRows, filter);
+        }
+        if (optionsConf !== undefined) {
+          setOptions(optionsConf);
+        }
+      })();
+    }
+  }, [filter, gridPopoverOpen, options, prevFilter, prevIsOpen, propOptions, selectedRows]);
 
   // Local filtering.
   useEffect(() => {
@@ -168,39 +225,6 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
     }
   }, [filter, props, reSearchOnFilterChange]);
 
-  /**
-   * Saves are wrapped in updateValue and triggered by blur events
-   */
-  const save = useCallback(async () => {
-    if (!options) return true;
-
-    // Filter saved
-    if (selectedItem === null) {
-      if (props.onSelectFilter) {
-        const { onSelectFilter } = props;
-        await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter as any });
-        return true;
-      } else {
-        if (filteredValues && filteredValues.length === 1) {
-          if (filteredValues[0].subComponent) return false;
-          return await selectItemHandler(filteredValues[0].value, null);
-        }
-      }
-      return false;
-    }
-    if (selectedItem.subComponent && !subComponentIsValid.current) return false;
-    await selectItemHandler(selectedItem.value, subSelectedValue);
-
-    return true;
-  }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
-
-  const { popoverWrapper } = useGridPopoverHook({
-    className: props.className,
-    invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
-    save,
-    dontSaveOnExternalClick: true,
-  });
-
   let lastHeader: ReactElement | null = null;
   let showHeader: ReactElement | null = null;
 
@@ -230,7 +254,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

@@ -502,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;
         }
 
@@ -529,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 {
@@ -543,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.
@@ -585,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();
@@ -629,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;
 
@@ -638,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;
@@ -649,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 () => {
@@ -678,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();
             }
           })();
 

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

@@ -123,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,6 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
+  CancelPromise,
   GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,
@@ -86,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

@@ -86,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/GridFormMultiSelectInteraction.stories.tsx

@@ -135,7 +135,8 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();
   await userEvent.type(textInput, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  // expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
   expect(onSave).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save

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

@@ -131,7 +131,7 @@ GridFormPopoverMenuInteractions_.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();
@@ -163,7 +163,7 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   // Test escape to not save
   updateValue.mockClear();
   await userEvent.type(textArea, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

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

@@ -71,7 +71,7 @@ GridFormTextAreaInteractions_.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/GridFormTextInputInteraction.stories.tsx

@@ -76,7 +76,7 @@ GridFormTextInputInteractions_.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();