fix: 点击项目列表外隐藏项目列表功能带来的 新增项目弹窗下拉选项点击后弹窗消失bug

src/views/Project/components/AddProject/index.tsx

@@ -134,6 +134,10 @@ const AddProject = (props: any) => {
     }
   };
 
+  const handleFromBox = (e: React.SyntheticEvent) => {
+    e.nativeEvent.stopImmediatePropagation()
+  }
+
   return (
     <MyDialog
       handleSubmit={handleSubmit}
@@ -141,7 +145,7 @@ const AddProject = (props: any) => {
       title="新建项目"
       submitloading={submitloading}
     >
-      <div className={style.formBox}>
+      <div className={style.formBox} onClick={handleFromBox}>
         <TextField
           required
           error={nameCheck.error}
@@ -160,6 +164,7 @@ const AddProject = (props: any) => {
           value={zoneId}
           onChange={handleZoneIdChange}
           variant="outlined"
+          onClick={handleFromBox}
         >
           {zoneIdOptions &&
             zoneIdOptions.map((option) => (

src/views/Project/components/CurrentProject/index.tsx

@@ -4,11 +4,13 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Popper, Fade } from "@mui/material";
 import { useStores } from "@/store/index";
 import ProjectListPopper from "../ProjectListPopper";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
+import AddProject from "../AddProject";
 
 const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
+  let addProjectRef: any = React.createRef();
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   
@@ -31,6 +33,11 @@ const CurrentProject = observer(() => {
     setOpen(!open);
   };
 
+  const openAddProject = () => {
+    addProjectRef.current.handleClickOpen()
+    setOpen(false)
+  }
+
   return (
     <div>
       <div
@@ -52,6 +59,7 @@ const CurrentProject = observer(() => {
           style={{ fontSize: 12 }}
         />
       </div>
+      <AddProject onRef={addProjectRef} />
       <Popper
         id={id}
         open={open}
@@ -64,6 +72,7 @@ const CurrentProject = observer(() => {
           <Fade {...TransitionProps} timeout={350}>
             <div>
               <ProjectListPopper
+                handleClickOpen={openAddProject}
                 handleChangeCurrentProject={handleChangeCurrentProject}
               />
             </div>

src/views/Project/components/ProjectListPopper/index.tsx

@@ -4,19 +4,14 @@ import { InputBase, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
 import { useStores } from "@/store/index";
-import AddProject from "@/views/Project/components/AddProject";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
 const ProjectListPopper = observer((props: any) => {
-  const { handleChangeCurrentProject } = props;
-  let addProjectRef: any = React.createRef();
+  const { handleChangeCurrentProject, handleClickOpen } = props;
   const { currentProjectStore } = useStores();
-  const handleClickOpen = () => {
-    addProjectRef.current.handleClickOpen();
-  };
   const [name, setName] = useState("");
   const nameChange = (e: any) => {
     setName(e.target.value);
@@ -28,8 +23,12 @@ const ProjectListPopper = observer((props: any) => {
     });
   }, [currentProjectStore.projectList, name]);
 
+  const handleProjectBox = (e: React.SyntheticEvent) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
   return (
-    <div className={style.projectBox}>
+    <div className={style.projectBox} onClick={handleProjectBox}>
       <div className={style.searchBox}>
         <IconButton
           type="submit"
@@ -53,7 +52,6 @@ const ProjectListPopper = observer((props: any) => {
         >
           <AddIcon className={style.addIcon} />
         </IconButton>
-        <AddProject onRef={addProjectRef} />
       </div>
       <div className={style.projectlist}>
         {list.map((item: any) => {