[stable22] Fix input for groups validation in new user form

apps/settings/css/settings.scss

@@ -1549,8 +1549,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			}
 
 			/* various */
-			&#grid-header,
-			&#new-user {
+			&#grid-header {
 				@include position('sticky');
 				align-self: normal;
 				background-color: var(--color-main-background);
@@ -1560,29 +1559,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				&.sticky {
 					box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
 				}
-
-				/* fake input for groups validation */
-				input#newgroups {
-					position: absolute;
-					opacity: 0;
-					width: 80% !important;
-					margin: 0 10%;
-					z-index: 0;
-				}
-			}
-
-			// separate prop to set initial value to top: 50px
-			&#new-user {
-				height: 120px;
-
-				.row {
-					padding-top: 50px;
-				}
 			}
 
 			&#grid-header {
 				color: var(--color-text-maxcontrast);
-				z-index: 60; /* above new-user */
 				border-bottom-width: thin;
 
 				#headerDisplayName,

apps/settings/src/components/UserList.vue

@@ -622,4 +622,16 @@ export default {
 	.row::v-deep .multiselect__single {
 		z-index: auto !important;
 	}
+
+	/* fake input for groups validation */
+	input#newgroups {
+		position: absolute;
+		opacity: 0;
+		/* The "hidden" input is behind the Multiselect, so in general it does
+		 * not receives clicks. However, with Firefox, after the validation
+		 * fails, it will receive the first click done on it, so its width needs
+		 * to be set to 0 to prevent that ("pointer-events: none" does not
+		 * prevent it). */
+		width: 0;
+	}
 </style>