🐛 fix: fix Message Modal input issue (#266)

src/chat/MessageModal/TextArea.tsx

@@ -0,0 +1,27 @@
+import { memo, useState } from 'react';
+
+import { TextArea, TextAreaProps } from '@/Input';
+
+interface MessageTextAreaProps extends Omit<TextAreaProps, 'onChange' | 'onBlur' | 'value'> {
+  defaultValue: string;
+  onChange?: (value: string) => void;
+}
+const MessageTextArea = memo<MessageTextAreaProps>(({ defaultValue, onChange, ...rest }) => {
+  const [text, setText] = useState<string>(defaultValue || '');
+
+  return (
+    <TextArea
+      onBlur={() => onChange?.(text)}
+      onChange={(e) => {
+        setText(e.target.value);
+      }}
+      onPressEnter={() => {
+        onChange?.(text);
+      }}
+      {...rest}
+      value={text}
+    />
+  );
+});
+
+export default MessageTextArea;

src/chat/MessageModal/index.tsx

@@ -6,12 +6,13 @@ import { CSSProperties, ReactNode, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 
-import { TextArea } from '@/Input';
 import Markdown from '@/Markdown';
 import Modal, { type ModalProps } from '@/Modal';
 import { type MessageInputProps } from '@/chat/MessageInput';
 import { useStyles as useTextStyles } from '@/chat/MessageInput/style';
 
+import MessageTextArea from './TextArea';
+
 export interface MessageModalProps extends Pick<ModalProps, 'open' | 'footer'> {
   /**
    * @description Whether the message is being edited or not
@@ -76,7 +77,7 @@ const MessageModal = memo<MessageModalProps>(
       value: open,
     });
 
-    const [temporaryValue, setValue] = useState(value);
+    const [temporaryValue, setMessage] = useState(value);
 
     const isAutoSize = height === 'auto';
     const markdownStyle: CSSProperties = {
@@ -91,7 +92,7 @@ const MessageModal = memo<MessageModalProps>(
           onClick={() => {
             setTyping(false);
             onChange?.(temporaryValue);
-            setValue(value);
+            setMessage(value);
           }}
           type="primary"
         >
@@ -100,7 +101,7 @@ const MessageModal = memo<MessageModalProps>(
         <Button
           onClick={() => {
             setTyping(false);
-            setValue(value);
+            setMessage(value);
           }}
         >
           {text?.cancel || 'Cancel'}
@@ -120,18 +121,18 @@ const MessageModal = memo<MessageModalProps>(
         onCancel={() => {
           setShowModal(false);
           setTyping(false);
-          setValue(value);
+          setMessage(value);
         }}
         onOk={() => setTyping(true)}
         open={showModal}
         title={text?.title}
       >
         {isEdit ? (
-          <TextArea
+          <MessageTextArea
             autoSize={isAutoSize}
             className={textStyles}
-            onBlur={(e) => setValue(e.target.value)}
-            onChange={(e) => setValue(e.target.value)}
+            defaultValue={value}
+            onChange={(value) => setMessage(value)}
             placeholder={placeholder}
             resize={false}
             style={{
@@ -140,7 +141,6 @@ const MessageModal = memo<MessageModalProps>(
               minHeight: mobile ? 'unset' : '100%',
             }}
             type={mobile ? 'pure' : 'block'}
-            value={temporaryValue}
           />
         ) : (
           <>