some debug

src/components/input/index.js

@@ -3,95 +3,103 @@ import _onInput from "../../utils/onInput";
 
 
 const Input = ({
-    title,
-    borderType,
-    gapSize,
-    id,
-    type,
-    direction,
-    className,
-    onChange,
-    style,
-    bg,
-    value,
-    max,
-    onFocus
+  title,
+  borderType,
+  gapSize,
+  id,
+  type,
+  direction,
+  className,
+  onChange,
+  style,
+  bg,
+  value,
+  max,
+  onFocus,
+  defaultValue,
 }) => {
-    useEffect(() => {
-       
-        if(value !== null && value !== '' && value !== undefined){
-            blurHandler2(id ? id : 0)
-        }
-       
-    }, [value])
-
-    const focusHandler = (id) => {
-        let inputs = document.querySelectorAll(".Login-box-form-item");
-        let label = document.querySelectorAll(".Login-box-form-item-label");
-        let line = document.querySelectorAll(".Login-box-form-item-line");
-        
-        inputs[id].style.borderColor = "#df1452";
-        inputs[id].style.backgroundColor = "#fff";
-        inputs[id].style.color = '#404040';
-        label[id].style.transform = `translate(-10px,-27px)`;
-        label[id].style.color = "#df1452";
-        line[id].style.backgroundColor = "#fff";
-        
-        
-    };
-
-    const blurHandler = (id) => {
-        let inputsBox = document.querySelectorAll(".Login-box-form-item");
-        let inputs = document.querySelectorAll(".Login-box-form-item-input");
-        let label = document.querySelectorAll(".Login-box-form-item-label");
-        let line = document.querySelectorAll(".Login-box-form-item-line");
-        if (inputs[id]) {
-            inputsBox[id].style.borderColor = "#EBEBEB";
-            label[id].style.transform = "translate(-10px,-27px)";
-            label[id].style.color = "#959595";
-            inputs[id].style.backgroundColor = "#fff";
-            line[id].style.backgroundColor = "#fff";
-        }
-
-    };
-    const blurHandler2 = (id) => {
-        let inputsBox = document.querySelectorAll(".Login-box-form-item");
-        let inputs = document.querySelectorAll(".Login-box-form-item-input");
-        let label = document.querySelectorAll(".Login-box-form-item-label");
-        let line = document.querySelectorAll(".Login-box-form-item-line");
-        if (inputs[id]) {
-            inputsBox[id].style.borderColor = "#404040";
-            label[id].style.transform = "translate(-10px,-27px)";
-            label[id].style.color = "#404040";
-            inputs[id].style.backgroundColor = "#fff";
-            line[id].style.backgroundColor = "#fff";
-        }
-
-    };
-    return (
-        <div style={style} className={`${className} Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
-            <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 `}></div>
-            <div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none">
-                {title ? title : 'نام کاربری'}
-            </div>
-            <input
-                type={type ? type : 'text'}
-                
-                name="Login-box-form-item-input-name"
-                id={`Login-box-form-item-input-name${id}`}
-                className={`Login-box-form-item-input w-full h-full  px-4 outline-0 rounded-lg text-gray-700 `}
-                style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
-                onFocus={() => {if(onFocus){onFocus();} focusHandler(id ? id : 0)}}
-                
-
-                onBlur={() => blurHandler(id ? id : 0)}
-                onChange={onChange}
-                value={value}
-                maxLength={max}
-                
-            />
-            
-        </div>
-    )
-}
+  useEffect(() => {
+    if (value !== null && value !== "" && value !== undefined) {
+      blurHandler2(id ? id : 0);
+    }
+  }, [value]);
+
+  const focusHandler = (id) => {
+    let inputs = document.querySelectorAll(".Login-box-form-item");
+    let label = document.querySelectorAll(".Login-box-form-item-label");
+    let line = document.querySelectorAll(".Login-box-form-item-line");
+
+    inputs[id].style.borderColor = "#df1452";
+    inputs[id].style.backgroundColor = "#fff";
+    inputs[id].style.color = "#404040";
+    label[id].style.transform = `translate(-10px,-27px)`;
+    label[id].style.color = "#df1452";
+    line[id].style.backgroundColor = "#fff";
+  };
+
+  const blurHandler = (id) => {
+    let inputsBox = document.querySelectorAll(".Login-box-form-item");
+    let inputs = document.querySelectorAll(".Login-box-form-item-input");
+    let label = document.querySelectorAll(".Login-box-form-item-label");
+    let line = document.querySelectorAll(".Login-box-form-item-line");
+    if (inputs[id]) {
+      inputsBox[id].style.borderColor = "#EBEBEB";
+      label[id].style.transform = "translate(-10px,-27px)";
+      label[id].style.color = "#959595";
+      inputs[id].style.backgroundColor = "#fff";
+      line[id].style.backgroundColor = "#fff";
+    }
+  };
+  const blurHandler2 = (id) => {
+    let inputsBox = document.querySelectorAll(".Login-box-form-item");
+    let inputs = document.querySelectorAll(".Login-box-form-item-input");
+    let label = document.querySelectorAll(".Login-box-form-item-label");
+    let line = document.querySelectorAll(".Login-box-form-item-line");
+    if (inputs[id]) {
+      inputsBox[id].style.borderColor = "#404040";
+      label[id].style.transform = "translate(-10px,-27px)";
+      label[id].style.color = "#404040";
+      inputs[id].style.backgroundColor = "#fff";
+      line[id].style.backgroundColor = "#fff";
+    }
+  };
+  return (
+    <div
+      style={style}
+      className={`${className} Login-box-form-item w-full h-12 ${
+        borderType ? borderType : "rounded-lg"
+      } border border-color7  mt-6 relative flex items-center flex-row-reverse`}
+    >
+      <div
+        className={`Login-box-form-item-line w-${
+          gapSize ? gapSize : "20"
+        } h-px absolute top-[-1px] right-7 `}
+      ></div>
+      <div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none">
+        {title ? title : "نام کاربری"}
+      </div>
+      <input
+        type={type ? type : "text"}
+        name="Login-box-form-item-input-name"
+        id={`Login-box-form-item-input-name${id}`}
+        className={`Login-box-form-item-input w-full h-full  px-4 outline-0 rounded-lg text-gray-700 `}
+        style={{
+          pointerEvents : defaultValue ? "none" : 'auto', 
+          direction: direction ? direction : "ltr",
+          backgroundColor: bg,
+        }}
+        onFocus={() => {
+          if (onFocus) {
+            onFocus();
+          }
+          focusHandler(id ? id : 0);
+        }}
+        onBlur={() => blurHandler(id ? id : 0)}
+        onChange={onChange}
+        value={value}
+        maxLength={max}
+      />
+    </div>
+  );
+};
 export default Input;

src/view/register/index.js

@@ -536,6 +536,7 @@ const Register = ({
                       direction="rtl"
                       id={0}
                       value={userInfo?.firstName}
+                      defaultValue={user?.firstName}
                       onChange={(e) =>
                         setUserInfo({
                           ...userInfo,
@@ -550,6 +551,7 @@ const Register = ({
                       id={1}
                       direction="rtl"
                       value={userInfo.lastName}
+                      defaultValue={user?.lastName}
                       onChange={(e) =>
                         setUserInfo({
                           ...userInfo,
@@ -566,6 +568,7 @@ const Register = ({
                       type="textNumber"
                       max={10}
                       value={userInfo.nationalId}
+                      defaultValue={user?.nationalId}
                       onChange={(e) =>
                         setUserInfo({
                           ...userInfo,
@@ -608,6 +611,7 @@ const Register = ({
                         setUserInfo({ ...userInfo, gender: e.target.value })
                       }
                       className="bg-white border border-solid border-gray-200 w-52 px-3 mx-1 rounded text-black outline-red52 py-1 h-12 mt-6"
+                      style={user?.gender ? { pointerEvents: "none" } : null}
                     >
                       {genders.map((item) => (
                         <option
@@ -661,6 +665,7 @@ const Register = ({
                     setUserInfo({ ...userInfo, gradeIds: e.target.value })
                   }
                   className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-black outline-red52 mx-6"
+                  style={user?.gradeIds ? { pointerEvents: "none" } : null}
                 >
                   <option value={null}>انتخاب پایه تحصیلی</option>
                   {grades.map((item) => (