forked from github/plane
fix: autofocus on the title element when we are creating the bulk issues in the issue create modal (#3998)
This commit is contained in:
parent
621624e29f
commit
e02fa4d9e7
@ -16,6 +16,7 @@ import { IssueDraftService } from "@/services/issue";
|
|||||||
export interface DraftIssueProps {
|
export interface DraftIssueProps {
|
||||||
changesMade: Partial<TIssue> | null;
|
changesMade: Partial<TIssue> | null;
|
||||||
data?: Partial<TIssue>;
|
data?: Partial<TIssue>;
|
||||||
|
issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
|
||||||
isCreateMoreToggleEnabled: boolean;
|
isCreateMoreToggleEnabled: boolean;
|
||||||
onCreateMoreToggleChange: (value: boolean) => void;
|
onCreateMoreToggleChange: (value: boolean) => void;
|
||||||
onChange: (formData: Partial<TIssue> | null) => void;
|
onChange: (formData: Partial<TIssue> | null) => void;
|
||||||
@ -31,6 +32,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
|
|||||||
const {
|
const {
|
||||||
changesMade,
|
changesMade,
|
||||||
data,
|
data,
|
||||||
|
issueTitleRef,
|
||||||
onChange,
|
onChange,
|
||||||
onClose,
|
onClose,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
@ -107,6 +109,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
|
|||||||
isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
|
isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
|
||||||
onCreateMoreToggleChange={onCreateMoreToggleChange}
|
onCreateMoreToggleChange={onCreateMoreToggleChange}
|
||||||
data={data}
|
data={data}
|
||||||
|
issueTitleRef={issueTitleRef}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
|
@ -52,6 +52,7 @@ const defaultValues: Partial<TIssue> = {
|
|||||||
|
|
||||||
export interface IssueFormProps {
|
export interface IssueFormProps {
|
||||||
data?: Partial<TIssue>;
|
data?: Partial<TIssue>;
|
||||||
|
issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
|
||||||
isCreateMoreToggleEnabled: boolean;
|
isCreateMoreToggleEnabled: boolean;
|
||||||
onCreateMoreToggleChange: (value: boolean) => void;
|
onCreateMoreToggleChange: (value: boolean) => void;
|
||||||
onChange?: (formData: Partial<TIssue> | null) => 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) => {
|
export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
||||||
const {
|
const {
|
||||||
data,
|
data,
|
||||||
|
issueTitleRef,
|
||||||
onChange,
|
onChange,
|
||||||
onClose,
|
onClose,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
@ -366,11 +368,12 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||||||
onChange(e.target.value);
|
onChange(e.target.value);
|
||||||
handleFormChange();
|
handleFormChange();
|
||||||
}}
|
}}
|
||||||
ref={ref}
|
ref={issueTitleRef || ref}
|
||||||
hasError={Boolean(errors.name)}
|
hasError={Boolean(errors.name)}
|
||||||
placeholder="Issue Title"
|
placeholder="Issue Title"
|
||||||
className="w-full resize-none text-xl"
|
className="w-full resize-none text-xl"
|
||||||
tabIndex={getTabIndex("name")}
|
tabIndex={getTabIndex("name")}
|
||||||
|
autoFocus
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
@ -46,6 +46,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
|||||||
storeType = EIssuesStoreType.PROJECT,
|
storeType = EIssuesStoreType.PROJECT,
|
||||||
isDraft = false,
|
isDraft = false,
|
||||||
} = props;
|
} = props;
|
||||||
|
// ref
|
||||||
|
const issueTitleRef = useRef<HTMLInputElement>(null);
|
||||||
// states
|
// states
|
||||||
const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
|
const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
|
||||||
const [createMore, setCreateMore] = useState(false);
|
const [createMore, setCreateMore] = useState(false);
|
||||||
@ -169,6 +171,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
|||||||
path: router.asPath,
|
path: router.asPath,
|
||||||
});
|
});
|
||||||
!createMore && handleClose();
|
!createMore && handleClose();
|
||||||
|
if (createMore) issueTitleRef && issueTitleRef?.current?.focus();
|
||||||
return response;
|
return response;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setToast({
|
setToast({
|
||||||
@ -268,6 +271,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
|||||||
cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
|
cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
|
||||||
module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
|
module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
|
||||||
}}
|
}}
|
||||||
|
issueTitleRef={issueTitleRef}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
onSubmit={handleFormSubmit}
|
onSubmit={handleFormSubmit}
|
||||||
@ -278,6 +282,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<IssueFormRoot
|
<IssueFormRoot
|
||||||
|
issueTitleRef={issueTitleRef}
|
||||||
data={{
|
data={{
|
||||||
...data,
|
...data,
|
||||||
description_html: description,
|
description_html: description,
|
||||||
|
Loading…
Reference in New Issue
Block a user