diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index ae12e804..ed13d9dc 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -83,7 +83,6 @@ export const Grid = ({ const { gridReady, setApis, - prePopupOps, ensureRowVisible, getFirstRowId, selectRowsById, @@ -98,7 +97,8 @@ export const Grid = ({ setOnCellEditingComplete, getColDef, } = useContext(GridContext); - const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext); + const { updatedDep, updatingCols } = useContext(GridUpdatingContext); + const gridContext = useContext(GridContext); const gridDivRef = useRef(null); @@ -387,23 +387,13 @@ export const Grid = ({ */ const startCellEditing = useCallback( (event: CellEvent) => { - prePopupOps(); - if (!event.node.isSelected()) { - event.node.setSelected(true, true); - } - // Cell already being edited, so don't re-edit until finished - if (checkUpdating([event.colDef.field ?? ""], event.data.id)) { - return; - } - - if (event.rowIndex !== null) { - event.api.startEditingCell({ - rowIndex: event.rowIndex, - colKey: event.column.getColId(), + event.data.id && + gridContext.startCellEditing({ + rowId: event.data.id, + colId: event.column.getColId(), }); - } }, - [checkUpdating, prePopupOps], + [gridContext], ); /** diff --git a/src/contexts/GridContext.tsx b/src/contexts/GridContext.tsx index 9e8254e5..9688e9fe 100644 --- a/src/contexts/GridContext.tsx +++ b/src/contexts/GridContext.tsx @@ -39,6 +39,7 @@ export interface GridContextType { autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult; sizeColumnsToFit: () => void; cancelEdit: () => void; + startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => void; stopEditing: () => void; updatingCells: ( props: { selectedRows: GridBaseRow[]; field?: string }, @@ -147,6 +148,9 @@ export const GridContext = createContext>({ cancelEdit: () => { console.error("no context provider for cancelEdit"); }, + startCellEditing: () => { + console.error("no context provider for startCellEditing"); + }, stopEditing: () => { console.error("no context provider for stopEditing"); }, diff --git a/src/contexts/GridContextProvider.tsx b/src/contexts/GridContextProvider.tsx index 07f4b396..60bb6606 100644 --- a/src/contexts/GridContextProvider.tsx +++ b/src/contexts/GridContextProvider.tsx @@ -21,7 +21,7 @@ interface GridContextProps { * Also, make sure the provider is created in a separate component, otherwise it won't be found. */ export const GridContextProvider = (props: GridContextProps): ReactElement => { - const { modifyUpdating } = useContext(GridUpdatingContext); + const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext); const [gridApi, setGridApi] = useState(); const [columnApi, setColumnApi] = useState(); const [gridReady, setGridReady] = useState(false); @@ -377,6 +377,34 @@ export const GridContextProvider = (props: GridCont gridApi.stopEditing(); }, [gridApi]); + const startCellEditing = useCallback( + async ({ rowId, colId }: { rowId: number; colId: string }) => { + if (!gridApi) return; + + const colDef = gridApi.getColumnDef(colId); + if (!colDef) return; + + // Cell already being edited, so don't re-edit until finished + if (checkUpdating([colDef.field ?? ""], rowId)) { + return; + } + + prePopupOps(); + + const rowIndex = gridApi.getRowNode(`${rowId}`)?.rowIndex; + if (rowIndex != null) { + const focusAndEdit = () => { + gridApi.startEditingCell({ + rowIndex, + colKey: colId, + }); + }; + defer(focusAndEdit); + } + }, + [checkUpdating, gridApi, prePopupOps], + ); + /** * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback */ @@ -618,6 +646,7 @@ export const GridContextProvider = (props: GridCont ensureSelectedRowIsVisible, sizeColumnsToFit, autoSizeColumns, + startCellEditing, stopEditing, cancelEdit, updatingCells,