fix(Safari): Event execution sequence

components/sender/index.tsx

@@ -213,17 +213,44 @@
 
   // ============================ Submit ============================
   const isCompositionRef = React.useRef(false);
+  const isCompositionEndRef = React.useRef(false);
+  const pendingKeyDownRef = React.useRef<React.KeyboardEvent<HTMLElement> | null>(null);
 
   const onInternalCompositionStart = () => {
     isCompositionRef.current = true;
   };
 
   const onInternalCompositionEnd = () => {
-    isCompositionRef.current = false;
+    if (isCompositionRef.current) {
+      isCompositionEndRef.current = true;
+      isCompositionRef.current = false;
+    }
+    // After processing the input Chinese, use CapsLock
+    if (pendingKeyDownRef.current?.key === 'CapsLock') {
+      isCompositionEndRef.current = false;
+    }
   };
 
   const onInternalKeyPress: TextareaProps['onKeyPress'] = (e) => {
-    const canSubmit = e.key === 'Enter' && !isCompositionRef.current;
+    if (isCompositionRef.current || isCompositionEndRef.current) {
+      // Parameter isCompositionRef.current is the event execution: onInternalCompositionStart -> onInternalKeyPress -> onInternalCompositionEnd
+      // Parameter isCompositionEndRef.current is the event execution: onInternalCompositionStart -> onInternalCompositionEnd -> onInternalKeyPress
+      handleActualKeyPress(e, false);
+      isCompositionRef.current = false;
+      if (isCompositionEndRef.current) {
+        isCompositionEndRef.current = false;
+        pendingKeyDownRef.current = null;
+      }
+    } else {
+      handleActualKeyPress(e, true);
+    }
+  };
+
+  const handleActualKeyPress = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>,
+    isCanSubmit: boolean,
+  ) => {
+    const canSubmit = e.key === 'Enter' && isCanSubmit;
 
     // Check for `submitType` to submit
     switch (submitType) {
@@ -245,6 +272,16 @@
     onKeyPress?.(e);
   };
 
+  const onInternalKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
+    if (e.key !== 'Unidentified') {
+      // Record e in the keydown event
+      pendingKeyDownRef.current = e;
+    }
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
   // ============================ Paste =============================
   const onInternalPaste: React.ClipboardEventHandler<HTMLElement> = (e) => {
     // Get files
@@ -346,7 +383,7 @@
             onPressEnter={onInternalKeyPress}
             onCompositionStart={onInternalCompositionStart}
             onCompositionEnd={onInternalCompositionEnd}
-            onKeyDown={onKeyDown}
+            onKeyDown={onInternalKeyDown}
             onPaste={onInternalPaste}
             variant="borderless"
             readOnly={readOnly}