[WEB-4041] chore: modal outside click behaviour #7072

web/core/components/cycles/modal.tsx

@@ -13,6 +13,7 @@ import { CycleForm } from "@/components/cycles";
 // constants
 // hooks
 import { useEventTracker, useCycle, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
@@ -180,8 +181,12 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
       setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
   }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
 
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
   return (
-    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <CycleForm
         handleFormSubmit={handleFormSubmit}
         handleClose={handleClose}

web/core/components/inbox/modals/create-modal/modal.tsx

@@ -5,6 +5,8 @@ import { FC, useState } from "react";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { InboxIssueCreateRoot } from "@/components/inbox/modals/create-modal";
+// hooks
+import useKeypress from "@/hooks/use-keypress";
 
 type TInboxIssueCreateModalRoot = {
   workspaceSlug: string;
@@ -20,13 +22,16 @@ export const InboxIssueCreateModalRoot: FC<TInboxIssueCreateModalRoot> = (props)
   // handlers
   const handleDuplicateIssueModal = (value: boolean) => setIsDuplicateModalOpen(value);
 
+  useKeypress("Escape", () => {
+    if (modalState) {
+      handleModalClose();
+      setIsDuplicateModalOpen(false);
+    }
+  });
+
   return (
     <ModalCore
       isOpen={modalState}
-      handleClose={() => {
-        handleModalClose();
-        setIsDuplicateModalOpen(false);
-      }}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
       className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"

web/core/components/issues/issue-modal/base.tsx

@@ -375,7 +375,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   return (
     <ModalCore
       isOpen={isOpen}
-      handleClose={() => handleClose(true)}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
       className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"

web/core/components/modules/modal.tsx

@@ -13,6 +13,7 @@ import { ModuleForm } from "@/components/modules";
 // constants
 // hooks
 import { useEventTracker, useModule, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -142,8 +143,12 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
       setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
   }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
 
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
   return (
-    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <ModuleForm
         handleFormSubmit={handleFormSubmit}
         handleClose={handleClose}

web/core/components/project/create-project-modal.tsx

@@ -4,6 +4,8 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // helpers
 import { getAssetIdFromUrl } from "@/helpers/file.helper";
 import { checkURLValidity } from "@/helpers/string.helper";
+// hooks
+import useKeypress from "@/hooks/use-keypress";
 // plane web components
 import { CreateProjectForm } from "@/plane-web/components/projects/create/root";
 // plane web types
@@ -54,8 +56,12 @@ export const CreateProjectModal: FC<Props> = (props) => {
     }
   };
 
+  useKeypress("Escape", () => {
+    if (isOpen) onClose();
+  });
+
   return (
-    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
         <CreateProjectForm
           setToFavorite={setToFavorite}

web/core/components/views/modal.tsx

@@ -10,6 +10,7 @@ import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@p
 import { ProjectViewForm } from "@/components/views";
 // hooks
 import { useProjectView } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
 
 type Props = {
   data?: IProjectView | null;
@@ -65,8 +66,12 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     else await handleUpdateView(formData);
   };
 
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
   return (
-    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <ProjectViewForm
         data={data}
         handleClose={handleClose}

web/core/components/web-hooks/create-webhook-modal.tsx

@@ -9,6 +9,8 @@ import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { csvDownload } from "@/helpers/download.helper";
+// hooks
+import useKeypress from "@/hooks/use-keypress";
 // components
 import { WebhookForm } from "./form";
 import { GeneratedHookDetails } from "./generated-hook-details";
@@ -93,16 +95,12 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
     }, 350);
   };
 
+  useKeypress("Escape", () => {
+    if (isOpen && !generatedWebhook) handleClose();
+  });
+
   return (
-    <ModalCore
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL} className="p-4 pb-0">
-      isOpen={isOpen}
-      handleClose={() => {
-        if (!generatedWebhook) handleClose();
-      }}
-      position={EModalPosition.TOP}
-      width={EModalWidth.XXL}
-      className="p-4 pb-0"
-    >
       {!generatedWebhook ? (
         <WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
       ) : (