From 68a6f12334d1cd36a202aefe17724fc95976b770 Mon Sep 17 00:00:00 2001
From: Pardeep Singh <pardeep@logic-square.com>
Date: Fri, 18 Feb 2022 13:06:36 +0530
Subject: [PATCH] bug fix -> MenuItem should not leave undefined `key`

---
 src/DropdownMenu.tsx | 53 ++++++++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 29a6c15..fe21289 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -1,6 +1,9 @@
 import Menu, { MenuItem } from 'rc-menu';
 import * as React from 'react';
-import { MentionsContextConsumer, MentionsContextProps } from './MentionsContext';
+import {
+  MentionsContextConsumer,
+  MentionsContextProps,
+} from './MentionsContext';
 import { OptionProps } from './Option';
 
 interface DropdownMenuProps {
@@ -29,36 +32,44 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
         prefixCls={`${prefixCls}-menu`}
         activeKey={activeOption.key}
         onSelect={({ key }) => {
-          const option = options.find(({ key: optionKey }) => optionKey === key);
+          const option = options.find(
+            ({ key: optionKey }) => optionKey === key,
+          );
           selectOption(option);
         }}
         onFocus={onFocus}
         onBlur={onBlur}
       >
-        {options.map((option, index) => {
-          const { key, disabled, children, className, style } = option;
-          return (
-            <MenuItem
-              key={key}
-              disabled={disabled}
-              className={className}
-              style={style}
-              onMouseEnter={() => {
-                setActiveIndex(index);
-              }}
-            >
-              {children}
-            </MenuItem>
-          );
-        })}
-
-        {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
+        {options.length ? (
+          options.map((option, index) => {
+            const { key, disabled, children, className, style } = option;
+            return (
+              <MenuItem
+                key={`${key}_${index}`}
+                disabled={disabled}
+                className={className}
+                style={style}
+                onMouseEnter={() => {
+                  setActiveIndex(index);
+                }}
+              >
+                {children}
+              </MenuItem>
+            );
+          })
+        ) : (
+          <MenuItem key={notFoundContent || 'notfound'} disabled>
+            {notFoundContent || 'Not Found'}
+          </MenuItem>
+        )}
       </Menu>
     );
   };
 
   public render() {
-    return <MentionsContextConsumer>{this.renderDropdown}</MentionsContextConsumer>;
+    return (
+      <MentionsContextConsumer>{this.renderDropdown}</MentionsContextConsumer>
+    );
   }
 }