diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx index c7bf17682..55f8d711f 100644 --- 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 | null; data?: Partial; + issueTitleRef: React.MutableRefObject; isCreateMoreToggleEnabled: boolean; onCreateMoreToggleChange: (value: boolean) => void; onChange: (formData: Partial | null) => void; @@ -31,6 +32,7 @@ export const DraftIssueLayout: React.FC = observer((props) => { const { changesMade, data, + issueTitleRef, onChange, onClose, onSubmit, @@ -107,6 +109,7 @@ export const DraftIssueLayout: React.FC = 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 index 9d11f4e68..b6c773335 100644 --- a/web/components/issues/issue-modal/form.tsx +++ b/web/components/issues/issue-modal/form.tsx @@ -52,6 +52,7 @@ const defaultValues: Partial = { export interface IssueFormProps { data?: Partial; + issueTitleRef: React.MutableRefObject; isCreateMoreToggleEnabled: boolean; onCreateMoreToggleChange: (value: boolean) => void; onChange?: (formData: Partial | null) => void; @@ -93,6 +94,7 @@ const getTabIndex = (key: string) => TAB_INDICES.findIndex((tabIndex) => tabInde export const IssueFormRoot: FC = observer((props) => { const { data, + issueTitleRef, onChange, onClose, onSubmit, @@ -366,11 +368,12 @@ export const IssueFormRoot: FC = 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 index b0e08dfd1..609392d4f 100644 --- 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 = observer((prop storeType = EIssuesStoreType.PROJECT, isDraft = false, } = props; + // ref + const issueTitleRef = useRef(null); // states const [changesMade, setChangesMade] = useState | null>(null); const [createMore, setCreateMore] = useState(false); @@ -169,6 +171,7 @@ export const CreateUpdateIssueModal: React.FC = 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 = 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 = observer((prop /> ) : (