Ignore ENTER while in text composition mode (#5462)

* Ignore ENTER while in text composition mode

* Update PR number

Author: compulim

CHANGELOG.md

@@ -209,6 +209,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Improved focus management for scroll to end button
 - Fixed [#5439](https://github.com/microsoft/BotFramework-WebChat/issues/5439). Fixed batched livestream activities are not recognized in the same session, in PR [#5440](https://github.com/microsoft/BotFramework-WebChat/pull/5440), by [@compulim](https://github.com/compulim)
 - Fixed [#5452](https://github.com/microsoft/BotFramework-WebChat/issues/5452). With Fluent/Copilot theme, the typing indicator padding should not be squashed, in PR [#5453](https://github.com/microsoft/BotFramework-WebChat/pull/5453), by [@compulim](https://github.com/compulim)
+- Fixed [#5461](https://github.com/microsoft/BotFramework-WebChat/issues/5461). On macOS and Fluent skinpack applied, using Japanese IME to input some Japanese text should not send them immediately, in PR [#5462](https://github.com/microsoft/BotFramework-WebChat/pull/5462), by [@compulim](https://github.com/compulim)
 
 # Removed
 

packages/fluent-theme/src/components/sendBox/TextArea.tsx

@@ -1,6 +1,13 @@
 import { hooks } from 'botframework-webchat-api';
 import cx from 'classnames';
-import React, { forwardRef, Fragment, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+import React, {
+  forwardRef,
+  Fragment,
+  useCallback,
+  useRef,
+  type FormEventHandler,
+  type KeyboardEventHandler
+} from 'react';
 import { useStyles } from '../../styles';
 import styles from './TextArea.module.css';
 
@@ -30,13 +37,22 @@ const TextArea = forwardRef<
 >((props, ref) => {
   const [uiState] = useUIState();
   const classNames = useStyles(styles);
+  const isInCompositionRef = useRef<boolean>(false);
 
   const disabled = uiState === 'disabled';
 
+  const handleCompositionEnd = useCallback(() => {
+    isInCompositionRef.current = false;
+  }, [isInCompositionRef]);
+
+  const handleCompositionStart = useCallback(() => {
+    isInCompositionRef.current = true;
+  }, [isInCompositionRef]);
+
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
     // Shift+Enter adds a new line
     // Enter requests related form submission
-    if (!event.shiftKey && event.key === 'Enter') {
+    if (!event.shiftKey && event.key === 'Enter' && !isInCompositionRef.current) {
       event.preventDefault();
 
       if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
@@ -84,6 +100,8 @@ const TextArea = forwardRef<
               classNames['sendbox__text-area-shared']
             )}
             data-testid={props['data-testid']}
+            onCompositionEnd={handleCompositionEnd}
+            onCompositionStart={handleCompositionStart}
             onInput={props.onInput}
             onKeyDown={handleKeyDown}
             placeholder={props.placeholder}