fix(settings): Fix duplicated group options in new account dialog

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 18 insertions, 12 deletions

diff --git a/apps/settings/src/components/Users/NewUserDialog.vue b/apps/settings/src/components/Users/NewUserDialog.vue
index dd43d4fc710..3e50efc2072 100644
--- a/apps/settings/src/components/Users/NewUserDialog.vue
+++ b/apps/settings/src/components/Users/NewUserDialog.vue
@@ -71,10 +71,10 @@
 					:multiple="true"
 					:taggable="true"
 					:required="!settings.isAdmin && !settings.isDelegatedAdmin"
-					:create-option="(value) => ({ name: value })"
-					@input="handleGroupInput"
+					:create-option="(value) => ({ id: value, name: value, isCreating: true })"
 					@search="searchGroups"
-					@option:created="createGroup" />
+					@option:created="createGroup"
+					@option:selected="options => addGroup(options.at(-1))" />
 					<!-- If user is not admin, they are a subadmin.
 						Subadmins can't create users outside their groups
 						Therefore, empty select is forbidden -->
@@ -272,15 +272,6 @@ export default {
 			}
 		},
 
-		handleGroupInput(groups) {
-			/**
-			 * Filter out groups with no id to prevent duplicate selected options
-			 *
-			 * Created groups are added programmatically by `createGroup()`
-			 */
-			 this.newUser.groups = groups.filter(group => Boolean(group.id))
-		},
-
 		async searchGroups(query, toggleLoading) {
 			if (this.promise) {
 				this.promise.cancel()
@@ -320,6 +311,21 @@ export default {
 		},
 
 		/**
+		 * Add user to group
+		 *
+		 * @param {object} group Group object
+		 */
+		async addGroup(group) {
+			if (group.isCreating) {
+				return
+			}
+			if (group.canAdd === false) {
+				return
+			}
+			this.newUser.groups.push(group)
+		},
+
+		/**
 		 * Validate quota string to make sure it's a valid human file size
 		 *
 		 * @param {string} quota Quota in readable format '5 GB'