From d80253e0cad32bd2305a06827a77cd32da039535 Mon Sep 17 00:00:00 2001
From: Eyuel Berga Woldemichael <30384633+eyuelberga@users.noreply.github.com>
Date: Thu, 21 Apr 2022 06:08:02 +0300
Subject: [PATCH] Fix user group not creating on press enter (#2869)

- add onSubmit handler to form
- made the name input a required field
- removed the newGroup state(it's not being used)
---
 .../ManageGroupPermissions.jsx                  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
index 2b033f0e5c..16a0bd5500 100644
--- a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
+++ b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
@@ -63,7 +63,6 @@ class ManageGroupPermissions extends React.Component {
         this.setState({
           creatingGroup: false,
           showNewGroupForm: false,
-          newGroup: null,
         });
         toast.success('Group has been created', {
           position: 'top-center',
@@ -75,7 +74,6 @@ class ManageGroupPermissions extends React.Component {
         this.setState({
           creatingGroup: false,
           showNewGroupForm: true,
-          newGroup: {},
         });
       });
   };
@@ -155,12 +153,18 @@ class ManageGroupPermissions extends React.Component {
                     <h3 className="card-title">Add new group</h3>
                   </div>
                   <div className="card-body">
-                    <form>
+                    <form
+                      onSubmit={(e) => {
+                        e.preventDefault();
+                        this.createGroup();
+                      }}
+                    >
                       <div className="form-group mb-3 ">
                         <div className="row">
                           <div className="col">
                             <input
                               type="text"
+                              required
                               className="form-control"
                               placeholder="Enter Name"
                               onChange={(e) => {
@@ -172,11 +176,11 @@ class ManageGroupPermissions extends React.Component {
                       </div>
                       <div className="form-footer">
                         <button
+                          type="button"
                           className="btn btn-light mr-2"
                           onClick={() =>
                             this.setState({
                               showNewGroupForm: false,
-                              newGroup: null,
                               newGroupName: null,
                             })
                           }
@@ -185,11 +189,8 @@ class ManageGroupPermissions extends React.Component {
                           Cancel
                         </button>
                         <button
+                          type="submit"
                           className={`btn mx-2 btn-primary ${creatingGroup ? 'btn-loading' : ''}`}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            this.createGroup();
-                          }}
                           disabled={creatingGroup}
                         >
                           Create Group