Fix input for groups validation in new user form

The hidden input used for form validation was not actually hidden, so it
was shown as a strange input field (it was either empty or it showed the
string representation of the groups array). Although just hiding it will
still keep the validation working when the input is hidden the browser
may not show any validation error in the UI, so it would not be possible
to create the user for "unknown" reasons.

Moreover, the validation API does not provide a way to bind the message
to a different element, and even if the message could be shown using a
Vue tooltip it would not follow the same style as the other native
messages in the rest of the elements.

The Multiselect component internally uses an input element, so now that
one is used for the validation instead of an additional "hidden" input.
That internal element is always empty (the selected groups are shown in
an auxiliary div), so the "required" attribute needs to be explicitly
set and removed on the input based on the currently selected groups.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

Author: danxuliu

apps/settings/js/vue-settings-apps-users-management.js

@@ -75,15 +75,8 @@
 					name="email"
 					type="email">
 				<div class="groups modal__item">
-					<!-- hidden input trick for vanilla html5 form validation -->
-					<input v-if="!settings.isAdmin"
-						id="newgroups"
-						:class="{'icon-loading-small': loading.groups}"
-						:required="!settings.isAdmin"
-						:value="newUser.groups"
-						tabindex="-1"
-						type="text">
-					<Multiselect v-model="newUser.groups"
+					<Multiselect ref="newusergroups"
+						v-model="newUser.groups"
 						:close-on-select="false"
 						:disabled="loading.groups||loading.all"
 						:multiple="true"
@@ -401,6 +394,20 @@ export default {
 				this.$refs.infiniteLoading.stateChanger.loaded()
 			}
 		},
+		'newUser.groups'() {
+			this.requireGroupsIfNeeded()
+		},
+		'showConfig.showNewUserForm'(val) {
+			if (!val) {
+				return
+			}
+
+			// Wait until next tick, as otherwise the element and its reference
+			// will not be initialized.
+			this.$nextTick(() => {
+				this.requireGroupsIfNeeded()
+			})
+		},
 	},
 
 	mounted() {
@@ -546,6 +553,26 @@ export default {
 			this.newUser.groups = []
 		},
 
+		/**
+		 * Set the group input as "required" if needed.
+		 *
+		 * Sub admins can create users only in the groups they manage, so at
+		 * least one group needs to be selected for the form to be valid.
+		 *
+		 * The selected groups are shown in an auxiliary div, but not in the
+		 * input itself. Therefore, the "required" attribute needs to be set
+		 * when there are no selected groups, but it needs to be removed
+		 * otherwise, as the input will be empty and fail validation even if
+		 * some group is already selected.
+		 */
+		requireGroupsIfNeeded() {
+			if (this.settings.isAdmin || !this.$refs.newusergroups) {
+				return
+			}
+
+			this.$refs.newusergroups.$refs.VueMultiselect.$refs.search.required = !this.newUser.groups.length
+		},
+
 		/**
 		 * Create a new group
 		 *