fix: remove duplicate component instance

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack, TextField, Typography, Box } from '@mui/material';
-import { useRef, useState, type Dispatch } from 'react';
+import { useEffect, useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthFactory, AuthType } from '../../types/authTypes';
@@ -14,6 +14,7 @@ import { useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
 import type { GenerateTokenResponse } from '../../api/identityAPI';
 import { GoogleAuthenticationV2 } from './GoogleAuthenticationV2';
+import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
 export interface LoginRegisterFormProps {
   loginRegisterValue: string;
@@ -47,11 +48,22 @@ export function LoginRegisterForm({
   const [error, setError] = useState<string>();
   const [touched, setTouched] = useState<boolean>(false);
   const inputError: boolean = touched && !!error;
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
   const toast = useToast();
   const { loading: userStatusLoading, execute: execUserStatus } = useApi(
     getUserStatusByPhoneNumberOrEmail,
   );
 
+  useEffect(() => {
+    if (textFieldRef.current) {
+      const inputBaseElement =
+        textFieldRef.current.querySelector('.MuiInputBase-root');
+      if (inputBaseElement) {
+        setMenuAnchorEl(inputBaseElement as HTMLElement);
+      }
+    }
+  }, []);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let newValue = event.target.value;
     newValue = replacePersianWithRealNumbers(newValue);
@@ -160,7 +172,7 @@ export function LoginRegisterForm({
                   value={countryCode}
                   onChange={setCountryCode}
                   show={showAdornment}
-                  menuAnchor={textFieldRef.current}
+                  menuAnchor={menuAnchorEl}
                   onCloseFocusRef={inputRef}
                 />
               ),

src/features/authentication/components/CountryCodeSelector.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { countries, type Country } from '../../../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon } from '@rkheftan/harmony-ui';
-import { LTRBox } from '@/components/common/LTRBox';
+import { LTRTypography } from '@/components/common/LTRTypography';
 interface CountryCodeSelectorProps {
   show: boolean;
   value: CountryCode;
@@ -133,7 +133,6 @@ export function CountryCodeSelector({
           style={{
             height: '1.5rem',
             width: '1.5rem',
-            // TODO: Check alignment for better styling definition
             marginTop: '-2px',
             marginRight: '4px',
           }}
@@ -183,7 +182,6 @@ export function CountryCodeSelector({
             />
           </Box>
 
-          {/* Can improve preformance with using virtual scrolling */}
           <Box sx={{ width: '100%', maxHeight: '14.75rem', overflow: 'auto' }}>
             {filteredCountries.length === 0 ? (
               <MenuItem disabled>
@@ -211,48 +209,13 @@ export function CountryCodeSelector({
                     />
                   </ListItemIcon>
                   <ListItemText primary={t(country.label, { ns: 'country' })} />
-                  <Typography color="text.secondary">
-                    <Typography>
-                      <LTRBox>{country.phone}</LTRBox>
-                    </Typography>
-                  </Typography>
+                  <LTRTypography color="text.secondary">
+                    {country.phone}
+                  </LTRTypography>
                 </MenuItem>
               ))
             )}
           </Box>
-
-          {/* virtual scrolling  */}
-          {/* <Virtuoso
-            style={{ height: '14.75rem' }} // Adjust height to account for the search bar
-            data={filteredCountries}
-            components={{
-              EmptyPlaceholder: () => (
-                <MenuItem disabled>
-                  <ListItemText>{t('messages.noResultFound')}</ListItemText>
-                </MenuItem>
-              ),
-            }}
-            initialTopMostItemIndex={countries.indexOf(selectedCountry)}
-            itemContent={(_, country) => (
-              <MenuItem
-                key={country.code}
-                selected={country.phone === value}
-                onClick={() => handleSelect(country)}
-              >
-                <ListItemIcon>
-                  <ReactCountryFlag
-                    countryCode={country.code}
-                    svg
-                    style={{ fontSize: '1.25em', lineHeight: '1.25em' }}
-                  />
-                </ListItemIcon>
-                <ListItemText primary={country.label} />
-                <Typography variant="body2" color="text.secondary">
-                  {country.phone}
-                </Typography>
-              </MenuItem>
-            )}
-          /> */}
         </Menu>
       </Box>
     </InputAdornment>