From 8731c350bd1867cedbaa735f035d16dde4033bc7 Mon Sep 17 00:00:00 2001
From: Artur Drozdz <45104241+404-html@users.noreply.github.com>
Date: Tue, 2 Nov 2021 15:14:41 +0100
Subject: [PATCH] fix: context menu in data browser not opening for cell of
 type number (#1913)

---
 .../BrowserCell/BrowserCell.react.js          | 13 +++++--
 .../ContextMenu/ContextMenu.react.js          | 34 ++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 1961c2ebd0..838b3b78a7 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -285,10 +285,17 @@ export default class BrowserCell extends Component {
       return {
         text: 'Set filter...', items: constraints.map(constraint => {
           const definition = Filters.Constraints[constraint];
+          const copyableValue = String(this.copyableValue);
           // Smart ellipsis for value - if it's long trim it in the middle: Lorem ipsum dolor si... aliqua
-          const value = this.copyableValue.length < 30 ? this.copyableValue :
-            `${this.copyableValue.substr(0, 20)}...${this.copyableValue.substr(this.copyableValue.length - 7)}`;
-          const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + value) : ''}`;
+          const value =
+            copyableValue.length < 30
+              ? copyableValue
+              : `${copyableValue.substr(0, 20)}...${copyableValue.substr(
+                  copyableValue.length - 7
+                )}`;
+          const text = `${this.props.field} ${definition.name}${
+            definition.comparable ? ' ' + value : ''
+          }`;
           return {
             text,
             callback: this.pickFilter.bind(this, constraint)
diff --git a/src/components/ContextMenu/ContextMenu.react.js b/src/components/ContextMenu/ContextMenu.react.js
index d8850500d8..64687510b5 100644
--- a/src/components/ContextMenu/ContextMenu.react.js
+++ b/src/components/ContextMenu/ContextMenu.react.js
@@ -51,16 +51,32 @@ const MenuSection = ({ level, items, path, setPath, hide }) => {
   return (<ul ref={sectionRef} className={styles.category} style={style}>
     {items.map((item, index) => {
       if (item.items) {
-        return (<li className={styles.item} onMouseEnter={() => {
-          const newPath = path.slice(0, level + 1);
-          newPath.push(index);
-          setPath(newPath);
-        }}>{item.text}</li>);
+        return (
+            <li
+              key={`menu-section-${level}-${index}`}
+              className={styles.item}
+              onMouseEnter={() => {
+                const newPath = path.slice(0, level + 1);
+                newPath.push(index);
+                setPath(newPath);
+              }}
+            >
+              {item.text}
+            </li>
+          );
       }
-      return (<li className={styles.option} onClick={() => {
-        item.callback && item.callback();
-        hide();
-      }}>{item.text}</li>);
+      return (
+          <li
+            key={`menu-section-${level}-${index}`}
+            className={styles.option}
+            onClick={() => {
+              item.callback && item.callback();
+              hide();
+            }}
+          >
+            {item.text}
+          </li>
+        );
     })}
   </ul>);
 }