Update Views.react.js

Author: mtrezza

src/components/BrowserMenu/BrowserMenu.react.js

@@ -68,21 +68,17 @@ export default class BrowserMenu extends React.Component {
                   : {}),
               }}
             >
-              {React.Children.map(this.props.children, child => {
-                if (child.type === BrowserMenu) {
+              {React.Children.map(this.props.children, (child) => {
+                if (React.isValidElement(child) && child.type === BrowserMenu) {
                   return React.cloneElement(child, {
                     ...child.props,
-                    parentClose: () => this.setState({ open: false }),
+                    parentClose: () => {
+                      this.setState({ open: false });
+                      this.props.parentClose?.();
+                    },
                   });
                 }
-                return React.cloneElement(child, {
-                  ...child.props,
-                  onClick: () => {
-                    child.props.onClick?.();
-                    this.setState({ open: false });
-                    this.props.parentClose?.();
-                  },
-                });
+                return child;
               })}
             </div>
           </div>
@@ -119,7 +115,7 @@ export default class BrowserMenu extends React.Component {
           {this.props.icon && <Icon name={this.props.icon} width={14} height={14} />}
           <span>{this.props.title}</span>
           {isSubmenu &&
-            React.Children.toArray(this.props.children).some(c => c.type === BrowserMenu) && (
+            React.Children.toArray(this.props.children).some(c => React.isValidElement(c) && c.type === BrowserMenu) && (
             <Icon
               name="right-outline"
               width={12}

src/components/BrowserMenu/MenuItem.react.js

@@ -19,8 +19,24 @@ const MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
   if (greenActive) {
     classes.push(styles.greenActive);
   }
+
+  const handleClick = (e) => {
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
   return (
-    <div className={classes.join(' ')} onClick={disabled ? undefined : onClick}>
+    <div
+      className={classes.join(' ')}
+      onClick={handleClick}
+      onMouseDown={handleClick} // This is needed - onClick alone doesn't work in this context
+      style={{
+        position: 'relative',
+        zIndex: 9999,
+        cursor: 'pointer'
+      }}
+    >
       {text}
     </div>
   );

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -7,18 +7,18 @@
  */
 import BrowserFilter from 'components/BrowserFilter/BrowserFilter.react';
 import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
-import Icon from 'components/Icon/Icon.react';
 import MenuItem from 'components/BrowserMenu/MenuItem.react';
-import prettyNumber from 'lib/prettyNumber';
-import React, { useRef } from 'react';
 import Separator from 'components/BrowserMenu/Separator.react';
-import styles from 'dashboard/Data/Browser/Browser.scss';
-import Toolbar from 'components/Toolbar/Toolbar.react';
-import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
 import ColumnsConfiguration from 'components/ColumnsConfiguration/ColumnsConfiguration.react';
-import SecureFieldsDialog from 'dashboard/Data/Browser/SecureFieldsDialog.react';
-import LoginDialog from 'dashboard/Data/Browser/LoginDialog.react';
+import Icon from 'components/Icon/Icon.react';
 import Toggle from 'components/Toggle/Toggle.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import styles from 'dashboard/Data/Browser/Browser.scss';
+import LoginDialog from 'dashboard/Data/Browser/LoginDialog.react';
+import SecureFieldsDialog from 'dashboard/Data/Browser/SecureFieldsDialog.react';
+import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
+import prettyNumber from 'lib/prettyNumber';
+import React, { useRef } from 'react';
 
 const BrowserToolbar = ({
   className,
@@ -447,7 +447,7 @@ const BrowserToolbar = ({
       )}
       <div className={styles.toolbarSeparator} />
       <BrowserMenu setCurrent={setCurrent} title="Settings" icon="gear-solid">
-        <BrowserMenu title="Info Panel">
+        <BrowserMenu title="Info Panel" setCurrent={setCurrent}>
           <MenuItem
             text={
               <span>
@@ -463,7 +463,9 @@ const BrowserToolbar = ({
                 Scroll to top
               </span>
             }
-            onClick={toggleScrollToTop}
+            onClick={() => {
+              toggleScrollToTop();
+            }}
           />
         </BrowserMenu>
       </BrowserMenu>

src/dashboard/Data/Views/Views.react.js

@@ -340,7 +340,7 @@ class Views extends TableView {
               text = 'Link';
             }
             content = (
-              <a href={url} target="_blank" rel="noreferrer">
+              <a href={url} target="_blank" rel="noopener noreferrer">
                 {text}
               </a>
             );