Fix: Quick Add Issue form remains visible on outside click

packages/hooks/src/use-outside-click-detector.tsx

@@ -25,5 +25,5 @@ export const useOutsideClickDetector = (
     return () => {
       document.removeEventListener("mousedown", handleClick, useCapture);
     };
-  });
+  }, [ref, callback, useCapture]);
 };

web/ce/components/issues/quick-add/root.tsx

@@ -51,7 +51,10 @@ export const QuickAddIssueFormRoot: FC<TQuickAddIssueFormRoot> = observer((props
 
   if (!projectDetail) return <></>;
 
-  const QUICK_ADD_ISSUE_FORMS: Record<EIssueLayoutTypes, FC<TQuickAddIssueForm>> = {
+  const QUICK_ADD_ISSUE_FORMS: Record<
+    EIssueLayoutTypes,
+    React.ForwardRefExoticComponent<TQuickAddIssueForm & React.RefAttributes<HTMLFormElement>>
+  > = {
     [EIssueLayoutTypes.LIST]: ListQuickAddIssueForm,
     [EIssueLayoutTypes.KANBAN]: KanbanQuickAddIssueForm,
     [EIssueLayoutTypes.CALENDAR]: CalendarQuickAddIssueForm,

web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx

@@ -1,9 +1,9 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { TQuickAddIssueForm } from "../root";
 
-export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, isOpen, projectDetail, register, onSubmit, isEpic } = props;
+export const CalendarQuickAddIssueForm = observer(forwardRef<HTMLFormElement, TQuickAddIssueForm>((props, ref) => {
+  const { isOpen, projectDetail, register, onSubmit, isEpic } = props;
 
   return (
     <div
@@ -29,4 +29,4 @@ export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props
       </form>
     </div>
   );
-});
+}));

web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx

@@ -1,11 +1,11 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
 import { TQuickAddIssueForm } from "../root";
 
-export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
+export const GanttQuickAddIssueForm = observer(forwardRef<HTMLFormElement, TQuickAddIssueForm>((props, ref) => {
+  const { projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
     <div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
@@ -32,4 +32,4 @@ export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =
       </div>
     </div>
   );
-});
+}));

web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
-export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+export const KanbanQuickAddIssueForm = observer(forwardRef<HTMLFormElement, TQuickAddIssueForm>((props, ref) => {
+  const { projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
     <div className="m-1 overflow-hidden rounded shadow-custom-shadow-sm">
@@ -26,4 +26,4 @@ export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props)
       </div>
     </div>
   );
-});
+}));

web/core/components/issues/issue-layouts/quick-add/form/list.tsx

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
-export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+export const ListQuickAddIssueForm = observer(forwardRef<HTMLFormElement, TQuickAddIssueForm>((props, ref) => {
+  const { projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
     <div className="shadow-custom-shadow-sm">
@@ -31,4 +31,4 @@ export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =>
       </div>
     </div>
   );
-});
+}));

web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
-export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+export const SpreadsheetQuickAddIssueForm = observer(forwardRef<HTMLFormElement, TQuickAddIssueForm>((props, ref) => {
+  const { projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
     <div className="pb-2">
@@ -29,4 +29,4 @@ export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((pr
       </p>
     </div>
   );
-});
+}));

web/core/components/issues/issue-layouts/quick-add/root.tsx

@@ -23,7 +23,6 @@ import { useEventTracker } from "@/hooks/store";
 import { QuickAddIssueFormRoot } from "@/plane-web/components/issues";
 
 export type TQuickAddIssueForm = {
-  ref: React.RefObject<HTMLFormElement>;
   isOpen: boolean;
   projectDetail: IProject;
   hasError: boolean;