Bugfix ::Selecting an option in codehinter in popup closes the popup (#6206)

* fix :: codehinter closing in tables event manager

* fix codehinter closing in pages event manager

* feat :: adding check if user has already pinned the popover

* fix :: multiple popover bug in event manager

frontend/src/Editor/Inspector/EventManager.jsx

@@ -34,6 +34,16 @@ export const EventManager = ({
     return { name: action.name, value: action.id };
   });
 
+  let checkIfClicksAreInsideOf = document.querySelector('#cm-complete-0');
+  // Listen for click events on body
+  if (checkIfClicksAreInsideOf) {
+    document.body.addEventListener('click', function (event) {
+      if (checkIfClicksAreInsideOf.contains(event.target)) {
+        event.stopPropagation();
+      }
+    });
+  }
+
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const styles = {
     ...defaultStyles(darkMode),

frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx

@@ -26,6 +26,8 @@ export const PageHandler = ({
   pages,
   components,
   dataQueries,
+  pinPagesPopover,
+  haveUserPinned,
 }) => {
   const isHomePage = page.id === homePageId;
   const isSelected = page.id === currentPageId;
@@ -174,7 +176,10 @@ export const PageHandler = ({
             <SettingsModal
               page={page}
               show={showSettingsModal}
-              handleClose={() => setShowSettingsModal(false)}
+              handleClose={() => {
+                setShowSettingsModal(false);
+                !haveUserPinned && pinPagesPopover(false);
+              }}
               darkMode={darkMode}
               updateOnPageLoadEvents={updateOnPageLoadEvents}
               currentState={currentState}
@@ -182,6 +187,7 @@ export const PageHandler = ({
               pages={pages}
               components={components}
               dataQueries={dataQueries}
+              pinPagesPopover={pinPagesPopover}
             />
           </div>
         </div>

frontend/src/Editor/LeftSidebar/SidebarPageSelector/SettingsModal.jsx

@@ -14,6 +14,7 @@ export const SettingsModal = ({
   pages,
   components,
   dataQueries,
+  pinPagesPopover,
 }) => {
   const [isSaving, _setIsSaving] = useState(false);
   console.log({ dataQueries });
@@ -21,16 +22,15 @@ export const SettingsModal = ({
   const allpages = pages.filter((p) => p.id !== page.id);
 
   return (
-    <div onClick={(event) => event.stopPropagation()}>
+    <div>
       <Modal
         show={show}
-        // onHide={handleClose}
+        onHide={handleClose}
         size="sm"
         centered
         className={`${darkMode && 'theme-dark'} page-handle-edit-modal`}
         backdrop="static"
         enforceFocus={false}
-        onClick={(event) => event.stopPropagation()}
       >
         <Modal.Header>
           <Modal.Title style={{ fontSize: '16px', fontWeight: '400' }} data-cy={'modal-title-page-events'}>
@@ -55,7 +55,7 @@ export const SettingsModal = ({
             </svg>
           </span>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body onClick={() => pinPagesPopover(true)}>
           <b data-cy={'page-events-labe'}>Events</b>
           <EventManager
             component={{

frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx

@@ -37,6 +37,7 @@ const LeftSidebarPageSelector = ({
 }) => {
   const [allpages, setPages] = useState(pages);
   const [pinned, setPinned] = useState(false);
+  const [haveUserPinned, setHaveUserPinned] = useState(false);
 
   const [newPageBeingCreated, setNewPageBeingCreated] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
@@ -61,6 +62,12 @@ const LeftSidebarPageSelector = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ pages })]);
 
+  const pinPagesPopover = (state) => {
+    if (!haveUserPinned) {
+      setPinned(state);
+    }
+  };
+
   const popoverContent = (
     <div>
       <div className="card-body p-0 pb-5">
@@ -96,7 +103,10 @@ const LeftSidebarPageSelector = ({
               </Button>
               <Button
                 title={`${pinned ? 'Unpin' : 'Pin'}`}
-                onClick={() => setPinned(!pinned)}
+                onClick={() => {
+                  setPinned(!pinned);
+                  !haveUserPinned && setHaveUserPinned(true);
+                }}
                 darkMode={darkMode}
                 size="sm"
                 styles={{ width: '28px', padding: 0 }}
@@ -145,6 +155,8 @@ const LeftSidebarPageSelector = ({
                 allpages={pages}
                 components={appDefinition?.components ?? {}}
                 dataQueries={dataQueries}
+                pinPagesPopover={pinPagesPopover}
+                haveUserPinned={haveUserPinned}
               />
             ) : (
               <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>