diff --git a/src/components/clickInputWhenContainingCellClicked.tsx b/src/components/clickInputWhenContainingCellClicked.tsx index cac25341..e3dc0e69 100644 --- a/src/components/clickInputWhenContainingCellClicked.tsx +++ b/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); };