fix: memorizing country select

src/components/ui/PhoneInput/PhoneInput.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { IMaskInput } from "react-imask";
 import {
     InputBase,
     type InputBaseProps,
     type PolymorphicComponentProps,
 } from "@mantine/core";
+import CountrySelect from "@/components/ui/PhoneInput/components/CountrySelect";
 import { Country } from "@/components/ui/PhoneInput/types";
 import getInitialDataFromValue from "@/components/ui/PhoneInput/utils/getInitialDataFromValue";
+import getPhoneMask from "@/components/ui/PhoneInput/utils/getPhoneMask";
 
 type AdditionalProps = {
     onChange: (value: string | null) => void;
@@ -60,28 +62,32 @@ const PhoneInput = ({
         setDropdownWidth(inputRef.current?.offsetWidth);
     }, [inputRef.current?.offsetWidth]);
 
+    const countrySelect = useMemo(
+        () => (
+            <CountrySelect
+                disabled={disabled || readOnly}
+                country={country}
+                setCountry={country => {
+                    setCountry(country);
+                    setPhoneMask(getPhoneMask(country.code), country);
+                    setValue("");
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                }}
+                leftSectionWidth={leftSectionWidth}
+                inputWidth={dropdownWidth}
+            />
+        ),
+        [country, leftSectionWidth, dropdownWidth, disabled, readOnly]
+    );
+
     return (
         <InputBase
             {...props}
             component={IMaskInput}
             inputRef={inputRef}
-            leftSection={
+            leftSection={countrySelect}
-                <></>
-                // <CountrySelect
-                //     disabled={disabled || readOnly}
-                //     country={country}
-                //     setCountry={country => {
-                //         setCountry(country);
-                //         setPhoneMask(getPhoneMask(country.code), country);
-                //         setValue("");
-                //         if (inputRef.current) {
-                //             inputRef.current.focus();
-                //         }
-                //     }}
-                //     leftSectionWidth={leftSectionWidth}
-                //     inputWidth={dropdownWidth}
-                // />
-            }
             leftSectionWidth={leftSectionWidth}
             styles={{
                 input: {
@@ -93,7 +99,6 @@ const PhoneInput = ({
                         "1px solid var(--mantine-color-default-border)",
                 },
             }}
-            inputMode={"numeric"}
             mask={mask}
             value={value}
             onAccept={onChange}