improve role required feedback on user

src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx

@@ -111,7 +111,7 @@ export default function AccessControlsPage() {
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
-                title: t("accessRoleErrorAdd"),
+                title: t("accessRoleRequired"),
                 description: t("accessRoleSelectPlease")
             });
             return;
@@ -173,15 +173,13 @@ export default function AccessControlsPage() {
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
-                title: t("accessRoleErrorAdd"),
+                title: t("accessRoleRequired"),
                 description: t("accessRoleSelectPlease")
             });
             return;
         }
 
-        const willHaveAdminRole = values.roles.some(
-            (r) => r.isAdmin === true
-        );
+        const willHaveAdminRole = values.roles.some((r) => r.isAdmin === true);
 
         const isRemovingOwnAdmin =
             sessionUser.userId === user.userId &&
@@ -226,7 +224,9 @@ export default function AccessControlsPage() {
                     <SettingsSectionForm>
                         <Form {...form}>
                             <form
-                                onSubmit={(e) => void handleAccessControlsSubmit(e)}
+                                onSubmit={(e) =>
+                                    void handleAccessControlsSubmit(e)
+                                }
                                 className="space-y-4"
                                 id="access-controls-form"
                             >

src/components/OrgRolesTagField.tsx

@@ -12,6 +12,7 @@ import {
 import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
 
+import { useRef } from "react";
 import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
 import { RolesSelector, type SelectedRole } from "./roles-selector";
 
@@ -41,6 +42,46 @@ export default function OrgRolesTagField<TFieldValues extends FieldValues>({
     disabled
 }: OrgRolesTagFieldProps<TFieldValues>) {
     const t = useTranslations();
+    const isPopoverOpenRef = useRef(false);
+    const lastValidRolesRef = useRef<SelectedRole[]>(
+        (form.getValues(name) as SelectedRole[]) ?? []
+    );
+
+    function validateRolesSelection() {
+        const current = form.getValues(name) as SelectedRole[];
+
+        if (current.length === 0 && lastValidRolesRef.current.length > 0) {
+            form.setValue(name, lastValidRolesRef.current as never, {
+                shouldDirty: true
+            });
+            toast({
+                variant: "destructive",
+                title: t("accessRoleRequired"),
+                description: t("accessRoleSelectPlease")
+            });
+            return false;
+        }
+
+        if (current.length > 0) {
+            lastValidRolesRef.current = current;
+        }
+
+        return true;
+    }
+
+    function handlePopoverOpenChange(open: boolean) {
+        isPopoverOpenRef.current = open;
+
+        if (open) {
+            const current = form.getValues(name) as SelectedRole[];
+            if (current.length > 0) {
+                lastValidRolesRef.current = current;
+            }
+            return;
+        }
+
+        validateRolesSelection();
+    }
 
     function setRoleTags(nextValue: SelectedRole[]) {
         const prev = form.getValues(name) as SelectedRole[];
@@ -61,39 +102,44 @@ export default function OrgRolesTagField<TFieldValues extends FieldValues>({
             return;
         }
 
-        if (next.length === 0) {
-            toast({
-                variant: "destructive",
-                title: t("accessRoleErrorAdd"),
-                description: t("accessRoleSelectPlease")
-            });
-            return;
-        }
-
         form.setValue(name, next as never, { shouldDirty: true });
+
+        if (next.length > 0 && !isPopoverOpenRef.current) {
+            lastValidRolesRef.current = next;
+        } else if (!isPopoverOpenRef.current) {
+            validateRolesSelection();
+        }
     }
 
     return (
         <FormField
             control={form.control}
             name={name}
-            render={({ field }) => (
-                <FormItem className="flex flex-col items-start">
-                    <FormLabel>{label ?? t("roles")}</FormLabel>
-                    <FormControl>
-                        <RolesSelector
-                            orgId={orgId}
-                            selectedRoles={field.value ?? []}
-                            onSelectRoles={setRoleTags}
-                            disabled={disabled}
-                        />
-                    </FormControl>
-                    {showMultiRolePaywallMessage && (
-                        <FormDescription>{paywallMessage}</FormDescription>
-                    )}
-                    <FormMessage />
-                </FormItem>
-            )}
+            render={({ field }) => {
+                const selectedRoles = (field.value ?? []) as SelectedRole[];
+                if (!isPopoverOpenRef.current && selectedRoles.length > 0) {
+                    lastValidRolesRef.current = selectedRoles;
+                }
+
+                return (
+                    <FormItem className="flex flex-col items-start">
+                        <FormLabel>{label ?? t("roles")}</FormLabel>
+                        <FormControl>
+                            <RolesSelector
+                                orgId={orgId}
+                                selectedRoles={selectedRoles}
+                                onSelectRoles={setRoleTags}
+                                onPopoverOpenChange={handlePopoverOpenChange}
+                                disabled={disabled}
+                            />
+                        </FormControl>
+                        {showMultiRolePaywallMessage && (
+                            <FormDescription>{paywallMessage}</FormDescription>
+                        )}
+                        <FormMessage />
+                    </FormItem>
+                );
+            }}
         />
     );
 }

src/components/multi-select/multi-select-tag-input.tsx

@@ -17,11 +17,13 @@ export interface MultiSelectInputProps<
 > extends MultiSelectTagsProps<T> {
     buttonText?: string;
     lockedIds?: Set<string>;
+    onPopoverOpenChange?: (open: boolean) => void;
 }
 
 export function MultiSelectTagInput<T extends TagValue>({
     buttonText,
     lockedIds,
+    onPopoverOpenChange,
     ...props
 }: MultiSelectInputProps<T>) {
     const selectedValues = new Set(props.value.map((v) => v.id));
@@ -33,6 +35,7 @@ export function MultiSelectTagInput<T extends TagValue>({
                     // clear input when popover is closed
                     props.onSearch("");
                 }
+                onPopoverOpenChange?.(open);
             }}
         >
             <PopoverTrigger asChild>

src/components/roles-selector.tsx

@@ -12,6 +12,7 @@ export type RolesSelectorProps = {
     orgId: string;
     selectedRoles?: SelectedRole[];
     onSelectRoles: (roles: SelectedRole[]) => void;
+    onPopoverOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     restrictAdminRole?: boolean;
     mapRolesByName?: boolean;
@@ -23,6 +24,7 @@ export function RolesSelector({
     orgId,
     selectedRoles = [],
     onSelectRoles,
+    onPopoverOpenChange,
     disabled,
     restrictAdminRole,
     mapRolesByName,
@@ -77,6 +79,7 @@ export function RolesSelector({
             options={rolesShown}
             value={selectedRoles}
             onChange={onSelectRoles}
+            onPopoverOpenChange={onPopoverOpenChange}
             disabled={disabled}
             lockedIds={lockedIds}
         />