Merge pull request #27864 from nextcloud/bug/27435/add-group-button

apps/settings/src/views/Users.vue

@@ -38,7 +38,7 @@
 					:loading="loadingAddGroup"
 					:title="t('settings', 'Add group')"
 					icon="icon-add"
-					@click="toggleAddGroupEntry(true)"
+					@click="showAddGroupForm"
 					@update:title="createGroup" />
 				<AppNavigationItem
 					id="everyone"
@@ -445,9 +445,6 @@ export default {
 		async createGroup(gid) {
 			// group is not valid
 			if (gid.trim() === '') {
-				Vue.nextTick(() => {
-					this.toggleAddGroupEntry(true)
-				})
 				return
 			}
 
@@ -455,41 +452,33 @@ export default {
 				this.loadingAddGroup = true
 				await this.$store.dispatch('addGroup', gid.trim())
 
-				this.toggleAddGroupEntry(false)
-				this.$router.push({
+				this.hideAddGroupForm()
+				await this.$router.push({
 					name: 'group',
 					params: {
 						selectedGroup: encodeURIComponent(gid.trim()),
 					},
 				})
 			} catch {
-				this.toggleAddGroupEntry(true)
+				this.showAddGroupForm()
 			} finally {
 				this.loadingAddGroup = false
 			}
 		},
 
-		/**
-		 * Toggle the add group entry editing state
-		 * @param {boolean} [state] set state instead of toggling
-		 */
-		toggleAddGroupEntry(state) {
-			if (state === undefined) {
-				state = !this.$refs.addGroup.editing
-			}
-			this.$refs.addGroup.editing = state
-
-			// focus input
-			Vue.nextTick(() => {
-				if (this.$refs.addGroup.$el) {
-					const input = this.$refs.addGroup.$el.querySelector('form > input[type="text"]')
-					if (input) {
-						input.focus()
-					}
-				}
+		showAddGroupForm() {
+			this.$refs.addGroup.editingActive = true
+			this.$refs.addGroup.onMenuToggle(false)
+			this.$nextTick(() => {
+				this.$refs.addGroup.$refs.editingInput.focusInput()
 			})
 		},
 
+		hideAddGroupForm() {
+			this.$refs.addGroup.editingActive = false
+			this.$refs.addGroup.editingValue = ''
+		},
+
 		/**
 		 * Format a group to a menu entry
 		 * @param {Object} group the group