outClick

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -94,6 +94,7 @@ export const ModalTiсket = ({
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const { showNotification } = useNotification();
+  const [commentSendDisable, setCommentSendDisable] = useState(false)
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -144,6 +145,8 @@ export const ModalTiсket = ({
   }
 
   function createComment() {
+    if (!inputsValue.comment) return
+    setCommentSendDisable(true)
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -153,6 +156,7 @@ export const ModalTiсket = ({
       },
     }).then((res) => {
       let newComment = res;
+      setCommentSendDisable(false)
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -285,6 +289,7 @@ export const ModalTiсket = ({
   }
 
   useEffect(() => {
+    initListeners()
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
@@ -502,14 +507,60 @@ export const ModalTiсket = ({
     setAcceptModalOpen(false);
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("button-add-worker") ||
+                    div.classList.contains("dropdownList"))
+        )
+    ) {
+      setDropListOpen(false);
+      setDropListMembersOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("deadLine") ||
+                    div.classList.contains("react-datepicker-popper"))
+        )
+    ) {
+      setDatePickerOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tags") ||
+                    div.classList.contains("tags__dropDown"))
+        )
+    ) {
+      setSelectTagsOpen(false)
+    }
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
-      onClick={() => setActive(false)}
+      onClick={(e) => {
+        if(e.target.className.includes('modal-tiket')) setActive(false)
+      }}
     >
       <div
         className="modal-tiket__content"
-        onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
           <h3 className="title-project">
@@ -646,7 +697,7 @@ export const ModalTiсket = ({
                   }));
                 }}
               />
-              <img src={send} onClick={createComment}></img>
+              <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment}></img>
             </div>
             <div className="comments__list">
               {comments.map((comment) => {

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -584,6 +584,11 @@
         margin-right: 18px;
       }
 
+      .disable {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
       //&:focus-within {
       //  border: 1px solid #0000004d;
       //}

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -93,8 +93,10 @@ export const TicketFullScreen = () => {
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const { showNotification } = useNotification();
+  const [commentSendDisable, setCommentSendDisable] = useState(false)
 
   useEffect(() => {
+    initListeners()
     apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
       (taskInfo) => {
         setTaskInfo(taskInfo);
@@ -217,6 +219,8 @@ export const TicketFullScreen = () => {
   }
 
   function createComment() {
+    if (!inputsValue.comment) return
+    setCommentSendDisable(true)
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -226,6 +230,7 @@ export const TicketFullScreen = () => {
       },
     }).then((res) => {
       let newComment = res;
+      setCommentSendDisable(false)
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -525,6 +530,63 @@ export const TicketFullScreen = () => {
     });
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("button-add-worker") ||
+                    div.classList.contains("dropdownList"))
+        )
+    ) {
+      setDropListOpen(false);
+      setDropListMembersOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("deadLine") ||
+                    div.classList.contains("react-datepicker-popper"))
+        )
+    ) {
+      setDatePickerOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tags") ||
+                    div.classList.contains("tags__dropDown"))
+        )
+    ) {
+      setSelectTagsOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("addPerson") ||
+                    div.classList.contains("persons__list"))
+        )
+    ) {
+      setPersonListOpen(false)
+    }
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -820,7 +882,7 @@ export const TicketFullScreen = () => {
                         }));
                       }}
                     />
-                    <img src={send} onClick={createComment} alt="send"></img>
+                    <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment} alt="send"></img>
                   </div>
                   <div className="comments__list">
                     {comments.map((comment) => {

src/pages/ProjectTracker/ProjectTracker.js

@@ -90,6 +90,7 @@ export const ProjectTracker = () => {
   useEffect(() => {
     dispatch(activeLoader());
     dispatch(setProjectBoardFetch(projectId.id));
+    initListeners()
   }, []);
 
   useEffect(() => {
@@ -353,6 +354,72 @@ export const ProjectTracker = () => {
     });
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("addPerson") ||
+                    div.classList.contains("persons__list"))
+        )
+    ) {
+      setPersonListOpen(false);
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tasks__head__executor") ||
+                    div.classList.contains("tasks__head__executorDropdown"))
+        )
+    ) {
+      setSelectedExecutorOpen(false);
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tasks__head__tags") ||
+                    div.classList.contains("tags__list"))
+        )
+    ) {
+      setTags({
+        open: false,
+        add: false,
+        edit: false,
+      });
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("board__head__more") ||
+                    div.classList.contains("column__select"))
+        )
+    ) {
+      setOpenColumnSelect((prevState) => {
+        const newState = {}
+        for (const key in prevState) {
+          newState[key] = false;
+        }
+        return newState;
+      })
+    }
+  };
+
   return (
     <div className="tracker">
       <ProfileHeader />