id type combo

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -14,6 +14,7 @@ import * as FieldUtils from "utils/FieldUtils";
 import * as HttpUtils from 'utils/HttpUtils';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as ComboData from "utils/ComboData";
+import en from "translations/en.json";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
@@ -44,11 +45,20 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         event.preventDefault();
     };
 
+    const getIdDocTypeLabel = (option) => {
+        if (!option) return "";
+        if (typeof option === "string") {
+            const item = ComboData.idDocType.find((o) => o.type === option);
+            return item?.label ? (en[item.label] ?? option) : option;
+        }
+        return option.label ? (en[option.label] ?? "") : "";
+    };
+
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
-            setSelectedIdDocInputType(currentUserData.idDocType)
+            setSelectedIdDocInputType(currentUserData.idDocType);
             setOnReady(true);
         }
     }, [currentUserData]);
@@ -392,24 +402,29 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
 
                             <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
-                                    label: "ID Type:",
+                                    label: `${en.idDocType}:`,
                                     valueName: "idDocType",
                                     disabled: (!editMode),
                                     dataList: ComboData.idDocType,
                                     filterOptions: (options) => options,
-                                    getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
+                                    getOptionLabel: getIdDocTypeLabel,
+                                    isOptionEqualToValue: (option, value) => {
+                                        if (typeof value === "string") {
+                                            return option?.type === value;
+                                        }
+                                        return option?.type === value?.type;
+                                    },
                                     onInputChange: (event, newValue, setInputValue) => {
                                         if (newValue == null) {
                                             setInputValue("");
+                                            return;
                                         }
-                                        let _val = newValue.split("-");
-                                        if (_val[0]) {
-                                            setInputValue(_val[0]);
-                                        }
+                                        setInputValue(newValue);
                                     },
                                     onChange: (event, newValue) => {
                                         if (newValue == null) {
                                             formik.setFieldValue("idDocType", "");
+                                            setSelectedIdDocInputType("");
                                             return;
                                         }
                                         formik.setFieldValue("idDocType", newValue.type);