"Enter"/"Shift Enter" to focus input below/above current row (#9)

jpmorganchase · Jul 2, 2023 · 4383896 · 4383896
1 parent 5bf01d9
commit 4383896
Showing 1 changed file with 50 additions and 1 deletion.
diff --git 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({
     <td>
       <Input
         className="table-control-table-input"
+        data-row={row}
+        data-column={column}
         value={value}
         onChange={(_, value) => {
           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
+          }
         }}
       />
     </td>
@@ -140,9 +155,13 @@ const TableHeaderCell = React.memo(
     columnIndex: number;
   }) => {
     if (editable) {
+      const row = -1;
       return (
         <th>
           <Input
+            className="table-control-table-input"
+            data-row={row}
+            data-column={columnIndex}
             value={value}
             onChange={(_, value) => {
               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
+              }
+            }}
           />
         </th>
       );
@@ -177,9 +209,13 @@ const TableGroupHeaderCell = React.memo(
     columnIndex: number;
   }) => {
     if (editable) {
+      const row = -2;
       return (
         <th>
           <Input
+            className="table-control-table-input"
+            data-row={row}
+            data-column={columnIndex}
             value={value}
             onChange={(_, value) => {
               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
+              }
+            }}
           />
         </th>
       );