Fix input for groups validation in new user form

The hidden input used for form validation was not actually hidden since Nextcloud 22, as the DOM structure changed to show a dialog rather than adding a row on top of the list when adding new users, so the CSS rules no longer matched. Signed-off-by: Daniel Calviño Sánchez <[email protected]>
nextcloud · Dec 7, 2021 · 4fff0e7 · 4fff0e7
1 parent 8d96d18
commit 4fff0e7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -1560,15 +1560,6 @@ 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

diff --git a/apps/settings/src/components/UserList.vue b/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>