MM-51676 - korean chars create duplicate categories (#23839)

* MM-51676 - korean chars create duplicate categories

* use isProcessing as a property instead of state; move validation of isComposing to generic modal

webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx

@@ -16,6 +16,7 @@ import {localizeMessage} from 'utils/utils';
 import '../category_modal.scss';
 
 const MAX_LENGTH = 22;
+const ACTION_WAIT_MS = 1000;
 
 type Props = {
     onExited: () => void;
@@ -34,6 +35,8 @@ type State = {
 }
 
 export default class EditCategoryModal extends React.PureComponent<Props, State> {
+    timeoutId: NodeJS.Timeout | null = null;
+    isProcessing = false;
     constructor(props: Props) {
         super(props);
 
@@ -54,7 +57,21 @@ export default class EditCategoryModal extends React.PureComponent<Props, State>
         this.handleClear();
     };
 
+    componentWillUnmount() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+
     handleConfirm = () => {
+        if (this.isProcessing) {
+            return;
+        }
+        this.isProcessing = true;
+        this.timeoutId = setTimeout(() => {
+            this.isProcessing = false;
+        }, ACTION_WAIT_MS);
+
         if (this.props.categoryId) {
             this.props.actions.renameCategory(this.props.categoryId, this.state.categoryName);
         } else {

webapp/channels/src/components/modal_controller/modal_controller.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 
 type Modal = {
     open: boolean;
-    dialogProps: Record<string, any>;
     dialogType: React.ComponentType;
+    dialogProps?: Record<string, any>;
 }
 
 type Props = {
@@ -64,7 +64,7 @@ export default class ModalController extends React.PureComponent<Props> {
         }
 
         return (
-            <>{modalOutput}</>
+            modalOutput
         );
     }
 }

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -95,6 +95,9 @@ export class GenericModal extends React.PureComponent<Props, State> {
 
     private onEnterKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Enter') {
+            if (event.nativeEvent.isComposing) {
+                return;
+            }
             if (this.props.autoCloseOnConfirmButton) {
                 this.onHide();
             }