From 83b207e7da0dab659fb34d969c3d2e5771c78af6 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Fri, 13 Jan 2023 12:28:23 +0530
Subject: [PATCH] Fix few more issues related to Menu rewrite. #5615

---
 web/pgadmin/static/js/AppMenuBar.jsx                   |  1 +
 web/pgadmin/static/js/components/Menu.jsx              |  9 +++++++--
 .../static/js/components/PgTree/FileTreeX/index.tsx    |  5 +++++
 web/pgadmin/static/js/components/PgTree/types.ts       |  1 +
 web/pgadmin/static/js/tree/tree_init.tsx               | 10 +++++++---
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx
index 038f07edd..db2bb0a74 100644
--- a/web/pgadmin/static/js/AppMenuBar.jsx
+++ b/web/pgadmin/static/js/AppMenuBar.jsx
@@ -85,6 +85,7 @@ export default function AppMenuBar() {
       }}
       hasCheck={hasCheck}
       checked={menuItem.checked}
+      closeOnCheck={true}
     >{menuItem.label}</PgMenuItem>;
   };
 
diff --git a/web/pgadmin/static/js/components/Menu.jsx b/web/pgadmin/static/js/components/Menu.jsx
index e4c3a0b59..e7435f385 100644
--- a/web/pgadmin/static/js/components/Menu.jsx
+++ b/web/pgadmin/static/js/components/Menu.jsx
@@ -64,6 +64,8 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
       menuButton={menuButton}
       className={clsx(classes.menu, className)}
       aria-label={label || 'Menu'}
+      onContextMenu={(e)=>e.preventDefault()}
+      viewScroll='close'
     />;
   }
   return (
@@ -74,6 +76,8 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
       className={clsx(classes.menu, className)}
       aria-label={label || 'Menu'}
       data-state={state}
+      onContextMenu={(e)=>e.preventDefault()}
+      viewScroll='close'
     />
   );
 }
@@ -92,12 +96,12 @@ export const PgSubMenu = applyStatics(SubMenu)(({label, ...props})=>{
   );
 });
 
-export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, ...props})=>{
+export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, closeOnCheck=false, ...props})=>{
   const classes = useStyles();
   let onClick = props.onClick;
   if(hasCheck) {
     onClick = (e)=>{
-      e.keepOpen = true;
+      e.keepOpen = !closeOnCheck;
       props.onClick(e);
     };
   }
@@ -115,6 +119,7 @@ PgMenuItem.propTypes = {
   accesskey: PropTypes.string,
   shortcut: CustomPropTypes.shortcut,
   children: CustomPropTypes.children,
+  closeOnCheck: PropTypes.bool,
   onClick: PropTypes.func,
 };
 
diff --git a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
index 578b2e112..3c8cb3c97 100644
--- a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
+++ b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
@@ -46,6 +46,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
             className='file-tree'
             onBlur={this.handleBlur}
             onClick={this.handleClick}
+            onScroll={this.props.onScroll}
             ref={this.wrapperRef}
             style={{
               height: height ? height : "calc(100vh - 60px)",
@@ -99,6 +100,10 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
 
     private handleTreeReady = (handle: IFileTreeHandle) => {
         const { onReady, model } = this.props
+        const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div')
+        if(this.props.onScroll) {
+            scrollDiv?.addEventListener('scroll', (ev: any)=>this.props.onScroll?.(ev));
+        }
 
         this.fileTreeHandle = {
             ...handle,
diff --git a/web/pgadmin/static/js/components/PgTree/types.ts b/web/pgadmin/static/js/components/PgTree/types.ts
index b3d97dd3a..f5ced73ae 100644
--- a/web/pgadmin/static/js/components/PgTree/types.ts
+++ b/web/pgadmin/static/js/components/PgTree/types.ts
@@ -85,6 +85,7 @@ export interface IFileTreeXProps {
     onReady?: (handle: IFileTreeXHandle) => void
     onEvent?: (event: IFileTreeXTriggerEvents) => void
     onContextMenu?: (ev: React.MouseEvent, item?: FileOrDir) => void
+    onScroll?: (ev: React.UIEvent<HTMLDivElement>) => void
 }
 
 export enum FileTreeXEvent {
diff --git a/web/pgadmin/static/js/tree/tree_init.tsx b/web/pgadmin/static/js/tree/tree_init.tsx
index cbe6ff313..64322a807 100644
--- a/web/pgadmin/static/js/tree/tree_init.tsx
+++ b/web/pgadmin/static/js/tree/tree_init.tsx
@@ -108,7 +108,7 @@ function BrowserTree(props) {
         return <PgMenuDivider key={i}/>;
     }
     if(menuItem.isDisabled) {
-      return <></>;
+      return <React.Fragment key={i}></React.Fragment>;
     }
     const hasCheck = typeof menuItem.checked == 'boolean';
 
@@ -134,7 +134,11 @@ function BrowserTree(props) {
   return (
     <Theme>
       <FileTreeX
-      {...props} height={'100%'} disableCache={true} onContextMenu={onContextMenu} />
+      {...props} height={'100%'} disableCache={true} onContextMenu={onContextMenu}
+      onScroll={()=>{
+        contextPos && setContextPos(null);
+      }}
+      />
       <PgMenu
           anchorPoint={{
               x: contextPos?.x,
@@ -149,7 +153,7 @@ function BrowserTree(props) {
             if(submenus) {
                 return <PgSubMenu key={i} label={menuItem.label}>
                 {submenus.map((submenuItem, si)=>{
-                    return getPgMenuItem(submenuItem, si);
+                    return getPgMenuItem(submenuItem, i+'-'+si);
                 })}
                 </PgSubMenu>;
             }