up and down key controls

src/hooks/useFiretable/index.ts

@@ -33,10 +33,10 @@ const useFiretable = (collectionName: string) => {
   useEffect(() => {
     if (cellState.cell) {
     }
-  }, [tab]);
+  }, [tab.isPressed]);
   // move focus to cell above on down key
   useEffect(() => {
-    if (cellState.cell) {
+    if (cellState.cell && moveUp.isPressed) {
       if (cellState.cell.rowIndex !== 0) {
         const nextRowIndex = cellState.cell.rowIndex - 1;
         cellActions.set({
@@ -46,11 +46,12 @@ const useFiretable = (collectionName: string) => {
         });
       }
     }
-  }, [moveUp]);
+    moveUp.clear();
+  }, [moveUp.isPressed]);
 
   // move focus to cell bellow on down up
   useEffect(() => {
-    if (cellState.cell) {
+    if (cellState.cell && moveDown.isPressed) {
       if (cellState.cell.rowIndex === tableState.rows.length - 1) {
         // reach last row creating new row
         tableActions.addRow();
@@ -63,7 +64,8 @@ const useFiretable = (collectionName: string) => {
         });
       }
     }
-  }, [moveDown]);
+    moveDown.clear();
+  }, [moveDown.isPressed]);
   const setTable = (collectionName: string) => {
     configActions.setTable(collectionName);
     tableActions.setTable(collectionName);

src/hooks/useFiretable/useKeyCode.ts

@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
 function useKeyCode(keyCode: number) {
-  const [isKeyPressed, setKeyPressed] = useState(false);
+  const [isPressed, setKeyPressed] = useState(false);
   // Only allow fetching each keypress event once to prevent infinite loops
   const clear = () => {
-    if (isKeyPressed) {
+    if (isPressed) {
       setKeyPressed(false);
     }
   };
-  clear();
   useEffect(() => {
     function downHandler(event: any) {
       if (event.keyCode === keyCode) {
@@ -18,6 +17,6 @@ function useKeyCode(keyCode: number) {
     return () => window.removeEventListener("keydown", downHandler);
   }, [keyCode]);
 
-  return isKeyPressed;
+  return { isPressed, clear };
 }
 export default useKeyCode;