diff --git a/packages/table-generator/ui-src/components/TableControl.tsx b/packages/table-generator/ui-src/components/TableControl.tsx index a494d16..2137831 100644 --- a/packages/table-generator/ui-src/components/TableControl.tsx +++ b/packages/table-generator/ui-src/components/TableControl.tsx @@ -61,6 +61,8 @@ const TableCell = React.memo(function TableCell({ { dispatch({ @@ -84,7 +86,20 @@ const TableCell = React.memo(function TableCell({ selectStart, selectEnd, }); - event.preventDefault(); // To support pasting into multi-range cells + event.preventDefault(); // Stop default pasting bahaviour, reducer updates multiple cell values directly + }} + onKeyUp={(event) => { + if (event.code === "Enter") { + const inputEle = document + .querySelector(".table-control-table") + ?.querySelector( + `.table-control-table-input[data-row="${ + row + (event.shiftKey ? -1 : 1) + }"][data-column="${column}"] input` + ) as HTMLInputElement | null; + inputEle?.focus(); + inputEle?.select(); // "Tab" does this as well + } }} /> @@ -140,9 +155,13 @@ const TableHeaderCell = React.memo( columnIndex: number; }) => { if (editable) { + const row = -1; return ( { dispatch({ @@ -151,6 +170,19 @@ const TableHeaderCell = React.memo( newValue: value, }); }} + onKeyUp={(event) => { + if (event.code === "Enter") { + const inputEle = document + .querySelector(".table-control-table") + ?.querySelector( + `.table-control-table-input[data-row="${ + row + (event.shiftKey ? -1 : 1) + }"][data-column="${columnIndex}"] input` + ) as HTMLInputElement | null; + inputEle?.focus(); + inputEle?.select(); // "Tab" does this as well + } + }} /> ); @@ -177,9 +209,13 @@ const TableGroupHeaderCell = React.memo( columnIndex: number; }) => { if (editable) { + const row = -2; return ( { dispatch({ @@ -188,6 +224,19 @@ const TableGroupHeaderCell = React.memo( newValue: value, }); }} + onKeyUp={(event) => { + if (event.code === "Enter") { + const inputEle = document + .querySelector(".table-control-table") + ?.querySelector( + `.table-control-table-input[data-row="${ + row + (event.shiftKey ? -1 : 1) + }"][data-column="${columnIndex}"] input` + ) as HTMLInputElement | null; + inputEle?.focus(); + inputEle?.select(); // "Tab" does this as well + } + }} /> );