diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx index abe5999902e..ad7d63ff0f4 100644 --- a/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-header.tsx @@ -217,11 +217,12 @@ export const InboxIssueActionsHeader: FC = observer((p }; useEffect(() => { + if (isSubmitting === "submitting") return; if (!isNotificationEmbed) document.addEventListener("keydown", onKeyDown); return () => { if (!isNotificationEmbed) document.removeEventListener("keydown", onKeyDown); }; - }, [onKeyDown, isNotificationEmbed]); + }, [onKeyDown, isNotificationEmbed, isSubmitting]); if (!inboxIssue) return null; diff --git a/web/core/components/inbox/content/issue-root.tsx b/web/core/components/inbox/content/issue-root.tsx index 3855502e934..87c8ae6d2c3 100644 --- a/web/core/components/inbox/content/issue-root.tsx +++ b/web/core/components/inbox/content/issue-root.tsx @@ -67,7 +67,7 @@ export const InboxIssueMainContent: React.FC = observer((props) => { }, update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial) => { try { - await inboxIssue.updateIssue({ ...data, id: _issueId }); + await inboxIssue.updateIssue(data); captureIssueEvent({ eventName: "Inbox issue updated", payload: { ...data, state: "SUCCESS", element: "Inbox" }, diff --git a/web/core/components/issues/description-input.tsx b/web/core/components/issues/description-input.tsx index 7f8ce330f48..8c18618c506 100644 --- a/web/core/components/issues/description-input.tsx +++ b/web/core/components/issues/description-input.tsx @@ -59,12 +59,12 @@ export const IssueDescriptionInput: FC = observer((p }); const handleDescriptionFormSubmit = useCallback( - async (formData: Partial, _issueId: string) => { - await issueOperations.update(workspaceSlug, projectId, _issueId, { + async (formData: Partial) => { + await issueOperations.update(workspaceSlug, projectId, issueId, { description_html: formData.description_html ?? "

", }); }, - [workspaceSlug, projectId, issueOperations] + [workspaceSlug, projectId, issueId, issueOperations] ); const { getWorkspaceBySlug } = useWorkspace(); @@ -84,17 +84,14 @@ export const IssueDescriptionInput: FC = observer((p }); }, [initialValue, issueId, reset]); - const debouncedHandleDescriptionFormSubmit = debounce(async (data: Partial, _issueId: string) => { - await handleDescriptionFormSubmit(data, _issueId); - setIsSubmitting("submitted"); - }, 1500); - + // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS + // TODO: Verify the exhaustive-deps warning + // eslint-disable-next-line react-hooks/exhaustive-deps const debouncedFormSave = useCallback( - (_issueId: string) => - handleSubmit((data) => { - debouncedHandleDescriptionFormSubmit(data, _issueId); - })(), - [debouncedHandleDescriptionFormSubmit, handleSubmit] + debounce(async () => { + handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); + }, 1500), + [handleSubmit, issueId] ); return ( @@ -116,7 +113,7 @@ export const IssueDescriptionInput: FC = observer((p onChange={(_description: object, description_html: string) => { setIsSubmitting("submitting"); onChange(description_html); - debouncedFormSave(issueId); + debouncedFormSave(); }} placeholder={ placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value) diff --git a/web/core/store/inbox/inbox-issue.store.ts b/web/core/store/inbox/inbox-issue.store.ts index 3c88557a95e..8d33fddeecd 100644 --- a/web/core/store/inbox/inbox-issue.store.ts +++ b/web/core/store/inbox/inbox-issue.store.ts @@ -151,12 +151,12 @@ export class InboxIssueStore implements IInboxIssueStore { updateIssue = async (issue: Partial) => { const inboxIssue = clone(this.issue); try { - if (!issue.id) return; + if (!this.issue.id) return; Object.keys(issue).forEach((key) => { const issueKey = key as keyof TIssue; set(this.issue, issueKey, issue[issueKey]); }); - await this.inboxIssueService.updateIssue(this.workspaceSlug, this.projectId, issue.id, issue); + await this.inboxIssueService.updateIssue(this.workspaceSlug, this.projectId, this.issue.id, issue); // fetching activity this.fetchIssueActivity(); } catch {