Add search input focus and save shortcuts

NBISweden · Aug 5, 2022 · cc03327 · cc03327
1 parent 1e948a6
commit cc03327
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
@@ -11,10 +11,12 @@ export const QuickAdd = ({
   addIssueActivity,
   toastList,
   onToastListUpdate,
+  issueInputRef,
 }: {
   addIssueActivity: (pair: IssueActivityPair) => void;
   toastList: ToastMsg[];
   onToastListUpdate: (newToast: ToastMsg) => void;
+  issueInutRef: React.RefObject<HTMLInputElement>;
 }) => {
   const [activities, setActivities] = useState<IdName[]>([]);
   const [issue, setIssue] = useState<Issue>(null);
@@ -204,7 +206,6 @@ export const QuickAdd = ({
 
   const suggestionsRef = useRef(null);
   useEscaper(suggestionsRef, handleHideAutocomplete);
-  const issueInputRef = useRef(null);
 
   const handleInputToAutocompleteFocus = (event: any) => {
     event.preventDefault();
@@ -254,6 +255,7 @@ export const QuickAdd = ({
       <div className="row">
         <input
           id="input-issue"
+          aria-keyshortcuts="ctrl+a"
           ref={issueInputRef}
           autoComplete="off"
           className={getSearchClasses()}

diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import {
   format as formatDate,
@@ -651,6 +651,8 @@ export const Report = () => {
 
   if (context.user === null) return <></>;
 
+  const issueInputRef = useRef(null);
+
   // Main content
   return (
     <>
@@ -680,7 +682,18 @@ export const Report = () => {
           />
           <HeaderUser username={context.user ? context.user.login : ""} />
         </header>
-        <main className="spreadsheet">
+        <main
+          className="spreadsheet"
+          onKeyDown={(e) => {
+            if (e.key.toLowerCase() === "s" && e.ctrlKey) {
+              e.preventDefault();
+              handleSave();
+            } else if (e.key.toLowerCase() === "a" && e.ctrlKey) {
+              e.preventDefault();
+              issueInputRef.current.focus();
+            }
+          }}
+        >
           {favorites && favorites.length > 0 && (
             <DragDropContext onDragEnd={onDragEnd}>
               <section className="favorites-container">
@@ -858,6 +871,7 @@ export const Report = () => {
                 addIssueActivity={addIssueActivityHandler}
                 toastList={toastList}
                 onToastListUpdate={handleToastListUpdate}
+                issueInputRef={issueInputRef}
               ></QuickAdd>
             </div>
             {toastList.length > 0 && (
@@ -869,7 +883,11 @@ export const Report = () => {
                   <p role="status">⚠ You have unsaved changes</p>
                 )}
               </div>
-              <button className="basic-button save-button" onClick={handleSave}>
+              <button
+                className="basic-button save-button"
+                aria-keyshortcuts="ctrl+s"
+                onClick={handleSave}
+              >
                 Save changes
               </button>
             </div>