fix: error when edited cell is out of grid viewport (#2148)

Resolves #2087 

**Steps Moving Forward:**
- Clarify whether we want to be able to **handle edits that are not in
the current viewport** -- with my understanding, this will mean we will
have to load in more grid data, which does not seem overly valuable (in
terms of the efficiency tradeoff) since we are dealing with an
improbable edge case where the user begins to edit in the viewport,
continues editing outside of the viewport where the cell originally was,
and then wants to commit those changes outside as well

** A better solution for the edge case above IMO is to **create a new
enhancement ticket** where we attempt to have the editing cell be
floating/sticky in the grid viewport, similar to how it is done on
Google Sheets **

**_Ticket Created:_**
#2153

<img width="276" alt="Screenshot 2024-07-16 at 10 37 02 AM"
src="https://github.com/user-attachments/assets/a5dd6e6e-5f91-4625-b225-ddfc46d5ea89">

packages/grid/src/Grid.tsx

@@ -2167,15 +2167,24 @@ class Grid extends PureComponent<GridProps, GridState> {
  }
  : { opacity: 0 };
 
- const modelColumn = this.getModelColumn(column);
- const modelRow = this.getModelRow(row);
+ let modelColumn;
+ let modelRow;
+ try {
+ modelColumn = this.getModelColumn(column);
+ modelRow = this.getModelRow(row);
+ } catch (e) {
+ return null;
+ }
  const inputStyle: CSSProperties | undefined =
  modelColumn != null && modelRow != null
  ? {
  textAlign: model.textAlignForCell(modelColumn, modelRow),
  }
  : undefined;
- const isValid = model.isValidForCell(modelColumn, modelRow, value);
+ const isValid =
+ modelColumn != null && modelRow != null
+ ? model.isValidForCell(modelColumn, modelRow, value)
+ : false;
 
  return (
  <div style={wrapperStyle}>