diff --git a/src/web/pages/roles/dialog.jsx b/src/web/pages/roles/dialog.jsx
index 2996fe7a51..a716ed419a 100644
--- a/src/web/pages/roles/dialog.jsx
+++ b/src/web/pages/roles/dialog.jsx
@@ -141,8 +141,12 @@ const Dialog = ({
                       !isDefined(state.permissionName)
                     }
                     isLoading={isCreatingPermission}
-                    value={{roleId: state.id, name: state.permissionName}}
-                    onClick={onCreatePermission}
+                    onClick={() =>
+                      onCreatePermission({
+                        roleId: state.id,
+                        name: state.permissionName,
+                      })
+                    }
                   />
                 </FormGroup>
 
@@ -160,8 +164,12 @@ const Dialog = ({
                     title={_('Create Permission')}
                     disabled={!hasGroups || !isDefined(state.groupId)}
                     isLoading={isCreatingSuperPermission}
-                    value={{roleId: state.id, groupId: state.groupId}}
-                    onClick={onCreateSuperPermission}
+                    onClick={() =>
+                      onCreateSuperPermission({
+                        roleId: state.id,
+                        groupId: state.groupId,
+                      })
+                    }
                   />
                 </FormGroup>