diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 53a9a28c0800b..79258f77479d7 100644
--- 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
index 2a70d40fb4e17..617677787ff23 100644
--- 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>