From 55df4cf22475cb38e7394b2bcb69486b2689b5ef Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@Rajats-MacBook-Pro.local>
Date: Thu, 28 Apr 2022 12:31:12 +0530
Subject: [PATCH] Followed the review request changed and updated the code

---
 .../createCategory/createCategory.tsx         | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx
index c5902f11f..6e123cf64 100644
--- a/webapp/src/components/createCategory/createCategory.tsx
+++ b/webapp/src/components/createCategory/createCategory.tsx
@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, { useState } from 'react'
+import React, {useState, KeyboardEvent} from 'react'
 
-import { useIntl } from 'react-intl'
+import {useIntl} from 'react-intl'
 
 import Dialog from '../dialog'
 import Button from '../../widgets/buttons/button'
@@ -20,50 +20,55 @@ type Props = {
 const CreateCategory = (props: Props): JSX.Element => {
     const intl = useIntl()
 
-    const placeholder = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' })
-    const cancelText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' })
-    const createText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' })
-    const updateText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update' })
+    const placeholder = intl.formatMessage({id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' })
+    const cancelText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' })
+    const createText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' })
+    const updateText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update' })
 
     const [name, setName] = useState(props.initialValue || '')
 
+    const handleKeypress = (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            props.onCreate(name)
+        }
+    }
+
     return (
         <Dialog
             className='CreateCategoryModal'
             onClose={props.onClose}
         >
-            <form>
-                <div className='CreateCategory'>
-                    <h3>{props.title}</h3>
-                    <input
-                        className='categoryNameInput'
-                        type='text'
-                        placeholder={placeholder}
-                        value={name}
-                        onChange={(e) => setName(e.target.value)}
-                        autoFocus={true}
-                        maxLength={100}
-                    />
-                    <div className='createCategoryActions'>
-                        <Button
-                            size={'medium'}
-                            danger={true}
-                            onClick={props.onClose}
-                        >
-                            {cancelText}
-                        </Button>
-                        <Button
-                            size={'medium'}
-                            filled={Boolean(name)}
-                            onClick={() => props.onCreate(name)}
-                            disabled={!name}
-                            submit={true}
-                        >
-                            {props.initialValue ? updateText : createText}
-                        </Button>
-                    </div>
+            <div className='CreateCategory'>
+                <h3>{props.title}</h3>
+                <input
+                    className='categoryNameInput'
+                    type='text'
+                    placeholder={placeholder}
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    autoFocus={true}
+                    maxLength={100}
+                    onKeyUp={handleKeypress}
+                />
+                <div className='createCategoryActions'>
+                    <Button
+                        size={'medium'}
+                        danger={true}
+                        onClick={props.onClose}
+                    >
+                        {cancelText}
+                    </Button>
+                    <Button
+                        size={'medium'}
+                        filled={Boolean(name)}
+                        onClick={() => props.onCreate(name)}
+                        disabled={!name}
+                        submit={true}
+                    >
+                        {props.initialValue ? updateText : createText}
+                    </Button>
                 </div>
-            </form>
+            </div>
         </Dialog>
     )
 }