fix(async-select): fix select loading bugs

src/app/(modules)/users/components/UserSheet.tsx

@@ -5,7 +5,7 @@ import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
 import { FormField } from '@/components/form';
-import { RoleCombobox } from '@/components/lookups/RoleCombobox';
+import { RoleSelect } from '@/components/lookups/RoleSelect';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -60,14 +60,17 @@ export function UserSheet({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-4 overflow-visible sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
 
           <DialogDescription>Assign user details and a role.</DialogDescription>
         </DialogHeader>
 
-        <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
+        <form
+          onSubmit={onSubmit}
+          className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-4"
+        >
           <div className="grid gap-4 md:grid-cols-2">
             <FormField
               id="first-name"
@@ -128,7 +131,7 @@ export function UserSheet({
           </div>
 
           <FormField label="Role" required error={roleErrorMessage}>
-            <RoleCombobox
+            <RoleSelect
               value={roleId}
               onValueChange={onRoleChange}
               enabled={open}
@@ -136,8 +139,6 @@ export function UserSheet({
               portalContainer={roleComboboxPortalRef}
             />
 
-            <div ref={roleComboboxPortalRef} />
-
             <input
               type="hidden"
               {...register('role_id')}
@@ -165,6 +166,8 @@ export function UserSheet({
             </Button>
           </DialogFooter>
         </form>
+
+        <div ref={roleComboboxPortalRef} />
       </DialogContent>
     </Dialog>
   );