Merge pull request #1721 from babu-ch/fix/ime-composition-enter-submit

fix: Ignore Enter pressed during IME composition in input fields

client/src/components/cards/AddCard/AddCard.jsx

@@ -15,7 +15,7 @@ import { usePopup } from '../../../lib/popup';
 
 import selectors from '../../../selectors';
 import { useClosable, useForm, useNestedRef } from '../../../hooks';
-import { isModifierKeyPressed } from '../../../utils/event-helpers';
+import { isComposing, isModifierKeyPressed } from '../../../utils/event-helpers';
 import { CardTypeIcons } from '../../../constants/Icons';
 import SelectCardTypeStep from '../SelectCardTypeStep';
 
@@ -88,6 +88,10 @@ const AddCard = React.memo(({ isOpened, className, onCreate, onClose }) => {
 
   const handleFieldKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       switch (event.key) {
         case 'Enter':
           event.preventDefault();

client/src/components/cards/Card/EditName.jsx

@@ -15,6 +15,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useField, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
+import { isComposing } from '../../../utils/event-helpers';
 
 import styles from './EditName.module.scss';
 
@@ -55,6 +56,10 @@ const EditName = React.memo(({ cardId, onClose }) => {
 
   const handleFieldKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       switch (event.key) {
         case 'Enter':
           event.preventDefault();

client/src/components/cards/CardModal/NameField.jsx

@@ -12,6 +12,7 @@ import { TextArea } from 'semantic-ui-react';
 import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
 
 import { useEscapeInterceptor, useField, useNestedRef } from '../../../hooks';
+import { isComposing } from '../../../utils/event-helpers';
 
 import styles from './NameField.module.scss';
 
@@ -43,6 +44,10 @@ const NameField = React.memo(({ defaultValue, size, onUpdate }) => {
 
   const handleKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       if (event.key === 'Enter') {
         event.preventDefault();
         fiedRef.current.blur();

client/src/components/custom-fields/CustomField/ValueField.jsx

@@ -9,6 +9,7 @@ import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
 import { Input } from '../../../lib/custom-ui';
 
 import { useEscapeInterceptor, useField, useNestedRef } from '../../../hooks';
+import { isComposing } from '../../../utils/event-helpers';
 
 import styles from './ValueField.module.scss';
 
@@ -35,6 +36,10 @@ const ValueField = React.memo(({ defaultValue, onUpdate, ...props }) => {
 
   const handleKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       if (event.key === 'Enter') {
         event.preventDefault();
         fieldRef.current.blur();

client/src/components/lists/List/EditName.jsx

@@ -13,6 +13,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useField, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
+import { isComposing } from '../../../utils/event-helpers';
 
 import styles from './EditName.module.scss';
 
@@ -46,6 +47,10 @@ const EditName = React.memo(({ listId, onClose }) => {
 
   const handleFieldKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       switch (event.key) {
         case 'Enter':
           event.preventDefault();

client/src/components/task-lists/TaskList/AddTask.jsx

@@ -15,7 +15,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
-import { isModifierKeyPressed } from '../../../utils/event-helpers';
+import { isComposing, isModifierKeyPressed } from '../../../utils/event-helpers';
 
 import styles from './AddTask.module.scss';
 
@@ -87,6 +87,10 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
 
   const handleFieldKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       if (event.key === 'Enter') {
         if (!isLinkingToCard) {
           event.preventDefault();

client/src/components/task-lists/TaskList/Task/EditName.jsx

@@ -15,6 +15,7 @@ import selectors from '../../../../selectors';
 import entryActions from '../../../../entry-actions';
 import { useField, useNestedRef } from '../../../../hooks';
 import { focusEnd } from '../../../../utils/element-helpers';
+import { isComposing } from '../../../../utils/event-helpers';
 
 import styles from './EditName.module.scss';
 
@@ -50,6 +51,10 @@ const EditName = React.memo(({ taskId, onClose }) => {
 
   const handleFieldKeyDown = useCallback(
     (event) => {
+      if (isComposing(event)) {
+        return;
+      }
+
       if (event.key === 'Enter') {
         event.preventDefault();
         submit();