From c6891452c17a11494e7e5affc952c37593aad41d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=95=EF=B8=8F=20mino?= <minoscc+dev@gmail.com>
Date: Wed, 23 Aug 2023 06:20:18 +0000
Subject: [PATCH 1/2] fix: MenuItem should not leave undefined `key`.

---
 src/DropdownMenu.tsx | 42 +++++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 637070d..74026a2 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -1,7 +1,7 @@
 import Menu, { MenuItem } from 'rc-menu';
 import * as React from 'react';
-import MentionsContext from './MentionsContext';
 import type { DataDrivenOptionProps } from './Mentions';
+import MentionsContext from './MentionsContext';
 interface DropdownMenuProps {
   prefixCls?: string;
   options: DataDrivenOptionProps[];
@@ -35,24 +35,28 @@ function DropdownMenu(props: DropdownMenuProps) {
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      {options.map((option, index) => {
-        const { key, disabled, className, style, label } = option;
-        return (
-          <MenuItem
-            key={key}
-            disabled={disabled}
-            className={className}
-            style={style}
-            onMouseEnter={() => {
-              setActiveIndex(index);
-            }}
-          >
-            {label}
-          </MenuItem>
-        );
-      })}
-
-      {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
+      {options.length > 0 ? (
+        options.map((option, index) => {
+          const { key, disabled, className, style, label } = option;
+          return (
+            <MenuItem
+              key={key}
+              disabled={disabled}
+              className={className}
+              style={style}
+              onMouseEnter={() => {
+                setActiveIndex(index);
+              }}
+            >
+              {label}
+            </MenuItem>
+          );
+        })
+      ) : (
+        <MenuItem key="not-found" disabled>
+          {notFoundContent}
+        </MenuItem>
+      )}
     </Menu>
   );
 }

From 555bfd2c281e709920fe7ca6a3471ec844f6e269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=95=EF=B8=8F=20mino?= <minoscc+dev@gmail.com>
Date: Wed, 23 Aug 2023 07:04:05 +0000
Subject: [PATCH 2/2] Use `items` instead

---
 src/DropdownMenu.tsx | 43 ++++++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 74026a2..540db23 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import Menu, { MenuItem } from 'rc-menu';
+import Menu from 'rc-menu';
 import * as React from 'react';
 import type { DataDrivenOptionProps } from './Mentions';
 import MentionsContext from './MentionsContext';
@@ -34,30 +34,23 @@ function DropdownMenu(props: DropdownMenuProps) {
       }}
       onFocus={onFocus}
       onBlur={onBlur}
-    >
-      {options.length > 0 ? (
-        options.map((option, index) => {
-          const { key, disabled, className, style, label } = option;
-          return (
-            <MenuItem
-              key={key}
-              disabled={disabled}
-              className={className}
-              style={style}
-              onMouseEnter={() => {
-                setActiveIndex(index);
-              }}
-            >
-              {label}
-            </MenuItem>
-          );
-        })
-      ) : (
-        <MenuItem key="not-found" disabled>
-          {notFoundContent}
-        </MenuItem>
-      )}
-    </Menu>
+      items={
+        options.length > 0
+          ? options.map(
+              ({ key, disabled, className, label, style }, index) => ({
+                key,
+                disabled,
+                className,
+                style,
+                label,
+                onMouseEnter: () => {
+                  setActiveIndex(index);
+                },
+              }),
+            )
+          : [{ key: 'not-found', disabled: true, label: notFoundContent }]
+      }
+    />
   );
 }