fix: autofocus on the title element when we are creating the bulk iss…

…ues in the issue create modal (#3998)
makeplane · Mar 20, 2024 · e02fa4d · e02fa4d
1 parent 621624e
commit e02fa4d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx
@@ -16,6 +16,7 @@ import { IssueDraftService } from "@/services/issue";
 export interface DraftIssueProps {
   changesMade: Partial<TIssue> | null;
   data?: Partial<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
   isCreateMoreToggleEnabled: boolean;
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange: (formData: Partial<TIssue> | null) => void;
@@ -31,6 +32,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const {
     changesMade,
     data,
+    issueTitleRef,
     onChange,
     onClose,
     onSubmit,
@@ -107,6 +109,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
         onCreateMoreToggleChange={onCreateMoreToggleChange}
         data={data}
+        issueTitleRef={issueTitleRef}
         onChange={onChange}
         onClose={handleClose}
         onSubmit={onSubmit}

diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
@@ -52,6 +52,7 @@ const defaultValues: Partial<TIssue> = {
 
 export interface IssueFormProps {
   data?: Partial<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
   isCreateMoreToggleEnabled: boolean;
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange?: (formData: Partial<TIssue> | null) => void;
@@ -93,6 +94,7 @@ const getTabIndex = (key: string) => TAB_INDICES.findIndex((tabIndex) => tabInde
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const {
     data,
+    issueTitleRef,
     onChange,
     onClose,
     onSubmit,
@@ -366,11 +368,12 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       onChange(e.target.value);
                       handleFormChange();
                     }}
-                    ref={ref}
+                    ref={issueTitleRef || ref}
                     hasError={Boolean(errors.name)}
                     placeholder="Issue Title"
                     className="w-full resize-none text-xl"
                     tabIndex={getTabIndex("name")}
+                    autoFocus
                   />
                 )}
               />

diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
@@ -46,6 +46,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     storeType = EIssuesStoreType.PROJECT,
     isDraft = false,
   } = props;
+  // ref
+  const issueTitleRef = useRef<HTMLInputElement>(null);
   // states
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);
@@ -169,6 +171,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         path: router.asPath,
       });
       !createMore && handleClose();
+      if (createMore) issueTitleRef && issueTitleRef?.current?.focus();
       return response;
     } catch (error) {
       setToast({
@@ -268,6 +271,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                       cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
                       module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
                     }}
+                    issueTitleRef={issueTitleRef}
                     onChange={handleFormChange}
                     onClose={handleClose}
                     onSubmit={handleFormSubmit}
@@ -278,6 +282,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                   />
                 ) : (
                   <IssueFormRoot
+                    issueTitleRef={issueTitleRef}
                     data={{
                       ...data,
                       description_html: description,