From af3b70b6066ddaf0c51b9e01fd16dbdef6a83d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Andr=C3=A9s=20V=C3=A9lez=20Vidal?=
 <pablovv2012@gmail.com>
Date: Mon, 26 Jun 2023 21:01:56 +0200
Subject: [PATCH] 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
---
 .../edit_category_modal/edit_category_modal.tsx | 17 +++++++++++++++++
 .../modal_controller/modal_controller.tsx       |  4 ++--
 .../src/generic_modal/generic_modal.tsx         |  3 +++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx b/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx
index 8d94257839..1c2a0812c2 100644
--- a/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx
+++ b/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 {
diff --git a/webapp/channels/src/components/modal_controller/modal_controller.tsx b/webapp/channels/src/components/modal_controller/modal_controller.tsx
index 01c8656f1a..495e755830 100644
--- a/webapp/channels/src/components/modal_controller/modal_controller.tsx
+++ b/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
         );
     }
 }
diff --git a/webapp/platform/components/src/generic_modal/generic_modal.tsx b/webapp/platform/components/src/generic_modal/generic_modal.tsx
index 807c16e15d..3bca20efd0 100644
--- a/webapp/platform/components/src/generic_modal/generic_modal.tsx
+++ b/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();
             }