From 3fccd4331526516d443086acd809942ecb2e497d Mon Sep 17 00:00:00 2001
From: Akshat Jawne <69530774+AkshatJawne@users.noreply.github.com>
Date: Wed, 17 Jul 2024 12:52:52 -0600
Subject: [PATCH] fix: error when edited cell is out of grid viewport (#2148)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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:_**
https://github.com/deephaven/web-client-ui/issues/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 | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/grid/src/Grid.tsx b/packages/grid/src/Grid.tsx
index 7a44863bc2..dcbc809b5d 100644
--- a/packages/grid/src/Grid.tsx
+++ b/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}>