fix: country code selector

src/features/profile/components/CountryCodeSelector.tsx

@@ -76,10 +76,10 @@ export function CountryCodeSelector({
     [searchTerm, t],
   );
 
-  const initialIndex = Math.max(
-    0,
-    filteredCountries.findIndex((c) => c.phone === value),
-  );
+  const initialIndex = useMemo(() => {
+    const index = filteredCountries.findIndex((c) => c.phone === value);
+    return Math.max(0, index);
+  }, [filteredCountries, value]);
 
   return (
     <InputAdornment
@@ -97,7 +97,7 @@ export function CountryCodeSelector({
             }),
           overflow: 'hidden',
           whiteSpace: 'nowrap',
-          height: '100%',
+          height: '200%',
           display: 'flex',
           alignItems: 'center',
           gap: 0.25,
@@ -132,11 +132,11 @@ export function CountryCodeSelector({
           open={open}
           onClose={handleClose}
           slotProps={{
-            list: {
+            paper: {
               sx: {
                 width: menuWidth,
-                height: '18.75rem',
-                p: 0,
+                maxHeight: '20rem',
+                overflow: 'hidden',
               },
             },
             transition: { onEntered: handleMenuEntered },
@@ -163,8 +163,7 @@ export function CountryCodeSelector({
             />
           </Box>
 
-          {/* Virtualized country list */}
-          <Box sx={{ width: '100%', height: '14.75rem' }}>
+          <Box sx={{ width: '100%', height: '16rem' }}>
             {filteredCountries.length === 0 ? (
               <MenuItem disabled>
                 <ListItem>
@@ -177,12 +176,18 @@ export function CountryCodeSelector({
               <Virtuoso
                 style={{ height: '100%', width: '100%' }}
                 data={filteredCountries}
-                initialTopMostItemIndex={initialIndex}
+                initialTopMostItemIndex={searchTerm ? 0 : initialIndex}
                 itemContent={(_, country) => (
                   <MenuItem
                     key={country.code}
                     selected={country.phone === value}
                     onClick={() => handleSelect(country)}
+                    sx={{
+                      minHeight: '48px',
+                      '&.Mui-selected': {
+                        backgroundColor: 'action.selected',
+                      },
+                    }}
                   >
                     <ListItemIcon>
                       <ReactCountryFlag
@@ -199,7 +204,7 @@ export function CountryCodeSelector({
                     </Typography>
                   </MenuItem>
                 )}
-                computeItemKey={(_, c) => c.code}
+                computeItemKey={(_, country) => country.code}
               />
             )}
           </Box>

src/features/profile/types/settingsType.ts

@@ -1,4 +1,5 @@
 import type { TFunction } from 'i18next';
+import type { CountryCode } from '@/types/commonTypes';
 
 export enum Gender {
   Male = 2,
@@ -107,8 +108,8 @@ export interface PhoneDisplayProps {
 export interface PhoneEditFormProps {
   phoneNumber: string;
   setPhoneNumber: (v: string) => void;
-  countryCode: string;
-  setCountryCode: (v: string) => void;
+  countryCode: CountryCode;
+  setCountryCode: (v: CountryCode) => void;
   verificationCode: string;
   setVerificationCode: (v: string) => void;
   isVerified: boolean;