From 2663528fa6dd62cb4e6451c6345993a9af88b485 Mon Sep 17 00:00:00 2001
From: jonandernovella <novella.uu@gmail.com>
Date: Mon, 25 Jul 2022 11:58:41 +0200
Subject: [PATCH] Rework focus and blur event handlers

The event handlers now use a arrow fn so that the fns do not fire everytime a component rerenders. Also, now only one row may be selected at a time.
---
 frontend/src/components/Cell.tsx | 20 ++++++++++----------
 frontend/src/components/Row.tsx  | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Cell.tsx b/frontend/src/components/Cell.tsx
index c0d67979..e20ed0e0 100644
--- a/frontend/src/components/Cell.tsx
+++ b/frontend/src/components/Cell.tsx
@@ -51,7 +51,7 @@ export const Cell = ({
   const onEscapeArea = (e: any) => {
     {
       if (e.key === "Escape") {
-        setShowCommentArea(false);
+        onBlurArea();
       }
     }
   };
@@ -97,10 +97,10 @@ export const Cell = ({
             date,
             "yyyy-MM-dd"
           )}`}
-          onChange={onCellChange}
-          onKeyUp={onDeleteCellEntry}
-          onFocus={onFocusRow}
-          onBlur={onBlurRow}
+          onChange={(ev) => onCellChange(ev)}
+          onKeyUp={(ev) => onDeleteCellEntry(ev)}
+          onFocus={() => onFocusRow()}
+          onBlur={() => onBlurRow()}
           className="cell"
           defaultValue={hours === 0 ? "" : hours}
         />
@@ -109,7 +109,7 @@ export const Cell = ({
             className={comments === "" ? "comment comment-unfilled" : "comment"}
             type="button"
             title="Toggle comment area"
-            onFocus={onFocusRow}
+            onFocus={() => onFocusRow()}
             onClick={() => onCommentButtonClick()}
           ></button>
         )}
@@ -119,14 +119,14 @@ export const Cell = ({
             <textarea
               autoFocus
               className="comment-area"
-              onChange={onCommentUpdate}
+              onChange={(ev) => onCommentUpdate(ev)}
               placeholder="Comments"
               name="comments"
               rows={2}
               maxLength={1000}
-              onKeyUp={onEscapeArea}
-              onFocus={onFocusRow}
-              onBlur={onBlurArea}
+              onKeyUp={(ev) => onEscapeArea(ev)}
+              onFocus={() => onFocusRow()}
+              onBlur={() => onBlurArea()}
               defaultValue={areaComments !== null ? areaComments : comments}
             />
             <button
diff --git a/frontend/src/components/Row.tsx b/frontend/src/components/Row.tsx
index 05c7d07b..01f2e61d 100644
--- a/frontend/src/components/Row.tsx
+++ b/frontend/src/components/Row.tsx
@@ -117,12 +117,12 @@ export const Row = ({
               )}`}
               topic={topic}
               date={day}
-              onCellUpdate={onCellUpdate}
+              onCellUpdate={(ev) => onCellUpdate(ev)}
               hours={rowHours[i]}
               comments={rowEntries[i] ? rowEntries[i].comments : ""}
               entryId={rowEntries[i] ? rowEntries[i].id : 0}
-              onFocusRow={onFocusRow}
-              onBlurRow={onBlurRow}
+              onFocusRow={() => onFocusRow()}
+              onBlurRow={() => onBlurRow()}
             />
           );
         })}
@@ -134,8 +134,8 @@ export const Row = ({
             className="cell"
             value={getRowSum(topic)}
             readOnly
-            onFocus={onFocusRow}
-            onBlur={onBlurRow}
+            onFocus={() => onFocusRow()}
+            onBlur={() => onBlurRow()}
             tabIndex={-1}
           />
         </div>