diff --git a/CHANGELOG.md b/CHANGELOG.md index d5e38e798d..2e91d22dd3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/fluent-theme/src/components/sendBox/TextArea.tsx b/packages/fluent-theme/src/components/sendBox/TextArea.tsx index 64c93bea11..aa92fde79e 100644 --- a/packages/fluent-theme/src/components/sendBox/TextArea.tsx +++ b/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(false); const disabled = uiState === 'disabled'; + const handleCompositionEnd = useCallback(() => { + isInCompositionRef.current = false; + }, [isInCompositionRef]); + + const handleCompositionStart = useCallback(() => { + isInCompositionRef.current = true; + }, [isInCompositionRef]); + const handleKeyDown = useCallback>(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}