From d5c8f598786dc205180d39239ccce1aebe04cf75 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@Rajats-MacBook-Pro.local>
Date: Wed, 27 Apr 2022 18:53:02 +0530
Subject: [PATCH] Feature added: Pressing enter should create a category

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

diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx
index adca8eb5b..c5902f11f 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 } from 'react'
 
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
 
 import Dialog from '../dialog'
 import Button from '../../widgets/buttons/button'
@@ -20,10 +20,10 @@ 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 || '')
 
@@ -32,35 +32,38 @@ const CreateCategory = (props: Props): JSX.Element => {
             className='CreateCategoryModal'
             onClose={props.onClose}
         >
-            <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}
-                    >
-                        {props.initialValue ? updateText : createText}
-                    </Button>
+            <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>
-            </div>
+            </form>
         </Dialog>
     )
 }