fix: resize style should work (#305)

* fix: resize style should work

* chore: misc

Author: zombieJ

src/Mentions.tsx

@@ -476,7 +476,24 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
       onPopupScroll?.(event);
     };
 
+    // ============================== Styles ==============================
+    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
+      if (resizeStyle !== undefined) {
+        mergedTextareaStyle.resize = resizeStyle;
+      }
+
+      return {
+        ...styles,
+        textarea: mergedTextareaStyle,
+      };
+    }, [style, 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}

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

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' });
+    });
+  });
 });