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.
NBISweden · Jul 27, 2022 · 1be34c2 · 1be34c2
1 parent 084c214
commit 1be34c2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git 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
@@ -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>