fix: loop when readonly is true (#489)

src/components/clickInputWhenContainingCellClicked.tsx

@@ -1,12 +1,18 @@
 import { CellClickedEvent } from "ag-grid-community";
+import { fnOrVar } from "../utils/util";
 
 /**
  * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
  * This passes the event to the checkbox when you click anywhere in the cell.
  */
-export const clickInputWhenContainingCellClicked = ({ data, event, colDef }: CellClickedEvent) => {
+export const clickInputWhenContainingCellClicked = (params: CellClickedEvent) => {
+  const { data, event, colDef } = params;
   if (!data || !event) return;
 
+  if (fnOrVar(colDef.editable, params) === false) {
+    return;
+  }
+
   const element = event.target as Element;
   // Already handled
   if (["BUTTON", "INPUT"].includes(element?.tagName) && element.closest(".ag-cell-inline-editing")) return;
@@ -17,24 +23,15 @@ export const clickInputWhenContainingCellClicked = ({ data, event, colDef }: Cel
   const colId = colDef.colId;
   if (!colId) return;
 
-  const clickInput = (cnt: number) => {
+  const clickInput = () => {
     const cell = row.querySelector(`[col-id='${colId}']`);
     if (!cell) return;
 
     const input = cell.querySelector("input, button");
-    if (!input) {
-      return;
-    }
-    // When clicking on a cell that is not editing, the cell changes to editing and the input/button ref becomes invalid
-    // So wait until the cell is in edit mode before sending the click
-    if (!input.ownerDocument.contains(input)) {
-      if (cnt !== 0) {
-        setTimeout(() => clickInput(cnt - 1));
-      }
-      return;
-    }
+    if (!input) return;
+
     input?.dispatchEvent(event);
   };
 
-  setTimeout(() => clickInput(20), 10);
+  setTimeout(clickInput, 20);
 };