From dba997ff6a624a49304099794ca6b1f3cc6b7ac9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 7 Nov 2025 16:39:54 +0800
Subject: [PATCH 1/2] fix: resize style should work

---
 src/Mentions.tsx            | 20 ++++++++++++++++++--
 tests/DropdownMenu.spec.tsx |  5 ++---
 tests/Mentions.spec.tsx     | 18 ++++++++++++++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index c08fb3f..39a6072 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -476,7 +476,24 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
       onPopupScroll?.(event);
     };
 
+    // ============================== Styles ==============================
+    const resizeStyle = styles?.textarea?.resize ?? style?.resize;
+    const mergedStyles = React.useMemo(() => {
+      const mergedTextareaStyle = { ...styles?.textarea };
+
+      // Only add resize if it has a valid value, avoid setting undefined
+      if (resizeStyle !== undefined) {
+        mergedTextareaStyle.resize = resizeStyle;
+      }
+
+      return {
+        ...styles,
+        textarea: mergedTextareaStyle,
+      };
+    }, [resizeStyle, styles]);
+
     // ============================== Render ==============================
+
     const mentionNode = (
       <>
         <TextArea
@@ -487,8 +504,7 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
            * The TextArea component code and found that the resize parameter in the style of the ResizeTextArea component is obtained from prop.style.
            * Just pass the resize attribute and leave everything else unchanged.
            */
-          style={{ resize: style?.resize }}
-          styles={{ textarea: styles?.textarea }}
+          styles={mergedStyles}
           ref={textareaRef}
           value={mergedValue}
           {...restProps}
diff --git a/tests/DropdownMenu.spec.tsx b/tests/DropdownMenu.spec.tsx
index 8d88603..2ab3ca5 100644
--- a/tests/DropdownMenu.spec.tsx
+++ b/tests/DropdownMenu.spec.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react';
-import KeyCode from '@rc-component/util/lib/KeyCode';
+import { render, act } from '@testing-library/react';
 import Mentions, { UnstableContext } from '../src';
-import { expectMeasuring, simulateInput } from './util';
+import { simulateInput } from './util';
 
 describe('DropdownMenu', () => {
   // Generate 20 options for testing scrolling behavior
diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx
index 88edd81..0c4a505 100644
--- a/tests/Mentions.spec.tsx
+++ b/tests/Mentions.spec.tsx
@@ -368,4 +368,22 @@ describe('Mentions', () => {
     // As all input options items have different values, so there's no case that a Mentions instance has duplicated menu item keys.
     expect(uniqueMenuItemKeys.length).toBe(menuItemKeys.length);
   });
+
+  describe('resize style', () => {
+    it('should apply resize style from style prop', () => {
+      const { container } = renderMentions({
+        style: { resize: 'vertical' },
+      });
+      const textarea = container.querySelector('textarea');
+      expect(textarea).toHaveStyle({ resize: 'vertical' });
+    });
+
+    it('should apply resize style from styles.textarea prop', () => {
+      const { container } = renderMentions({
+        styles: { textarea: { resize: 'vertical' } },
+      });
+      const textarea = container.querySelector('textarea');
+      expect(textarea).toHaveStyle({ resize: 'vertical' });
+    });
+  });
 });

From 713239e56c145b6912c825d1544d030a8011c1ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 7 Nov 2025 16:46:53 +0800
Subject: [PATCH 2/2] chore: misc

---
 src/Mentions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 39a6072..e065954 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -477,8 +477,8 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
     };
 
     // ============================== Styles ==============================
-    const resizeStyle = styles?.textarea?.resize ?? style?.resize;
     const mergedStyles = React.useMemo(() => {
+      const resizeStyle = styles?.textarea?.resize ?? style?.resize;
       const mergedTextareaStyle = { ...styles?.textarea };
 
       // Only add resize if it has a valid value, avoid setting undefined
@@ -490,7 +490,7 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
         ...styles,
         textarea: mergedTextareaStyle,
       };
-    }, [resizeStyle, styles]);
+    }, [style, styles]);
 
     // ============================== Render ==============================