@itilite/iui-user-management 0.2.5 → 0.2.6

package/dist/index.js

@@ -181,22 +181,22 @@ function clsx() {
   return n;
 }
 
-function GetInputType(_ref) {
-  var _p = _ref._p,
-      _ref$inputState = _ref.inputState,
-      inputState = _ref$inputState === void 0 ? {} : _ref$inputState,
-      _ref$onValueChange = _ref.onValueChange,
-      onValueChange = _ref$onValueChange === void 0 ? function () {} : _ref$onValueChange,
-      _ref$dropdownList = _ref.dropdownList,
-      dropdownList = _ref$dropdownList === void 0 ? {} : _ref$dropdownList,
-      _ref$dateFormat = _ref.dateFormat,
-      dateFormat = _ref$dateFormat === void 0 ? 'dd MMM yyyy' : _ref$dateFormat,
-      _ref$errorArray = _ref.errorArray,
-      errorArray = _ref$errorArray === void 0 ? [] : _ref$errorArray,
-      _ref$errorMsg = _ref.errorMsg,
-      errorMsg = _ref$errorMsg === void 0 ? '' : _ref$errorMsg,
-      _ref$showNaOption = _ref.showNaOption,
-      showNaOption = _ref$showNaOption === void 0 ? false : _ref$showNaOption;
+var GetInputType = React__default.forwardRef(function (props, ref) {
+  var _p = props._p,
+      _props$inputState = props.inputState,
+      inputState = _props$inputState === void 0 ? {} : _props$inputState,
+      _props$customHandler = props.customHandler,
+      customHandler = _props$customHandler === void 0 ? function () {} : _props$customHandler,
+      _props$dropdownList = props.dropdownList,
+      dropdownList = _props$dropdownList === void 0 ? {} : _props$dropdownList,
+      _props$dateFormat = props.dateFormat,
+      dateFormat = _props$dateFormat === void 0 ? 'dd MMM yyyy' : _props$dateFormat,
+      _props$errorArray = props.errorArray,
+      errorArray = _props$errorArray === void 0 ? [] : _props$errorArray,
+      _props$errorMsg = props.errorMsg,
+      errorMsg = _props$errorMsg === void 0 ? '' : _props$errorMsg,
+      _props$showNaOption = props.showNaOption,
+      showNaOption = _props$showNaOption === void 0 ? false : _props$showNaOption;
 
   switch (_p.type) {
     case 'input':
@@ -207,7 +207,7 @@ function GetInputType(_ref) {
         name: _p.name,
         id: _p.name,
         defaultValue: inputState[_p.name],
-        onValueChange: onValueChange,
+        customHandler: customHandler,
         placeholder: _p.placeholder,
         validation: _p.validation,
         isError: errorArray.indexOf(_p.name) !== -1,
@@ -231,7 +231,7 @@ function GetInputType(_ref) {
         name: _p.name,
         id: _p.name,
         dateValue: inputState[_p.name],
-        onValueChange: onValueChange,
+        customHandler: customHandler,
         displayDateType: dateFormat,
         placeholder: dateFormat.toUpperCase(),
         maxDate: _p.maxDate,
@@ -255,7 +255,7 @@ function GetInputType(_ref) {
         name: _p.name,
         id: _p.name,
         value: inputState[_p.name],
-        onValueChange: onValueChange,
+        customSelectHandler: customHandler,
         menuItemTitle: _p.placeholder,
         isError: errorArray.indexOf(_p.name) !== -1,
         errorMsg: errorMsg,
@@ -276,7 +276,7 @@ function GetInputType(_ref) {
         value: inputState[_p.name],
         required: _p.required,
         selectedCountryOverride: inputState.country_code,
-        onValueChange: onValueChange,
+        customHandler: customHandler,
         validation: _p.validation,
         isError: errorArray.indexOf(_p.name) !== -1,
         errorMsg: errorMsg,
@@ -289,7 +289,7 @@ function GetInputType(_ref) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUICheckboxButton, {
         label: _p.label,
         isCheckbox: true,
-        onValueChange: onValueChange,
+        customHandler: customHandler,
         checkboxFlag: inputState[_p.name],
         disabled: _p.readOnly,
         hasInfoIcon: !!_p.tooltip,
@@ -311,7 +311,7 @@ function GetInputType(_ref) {
         fileType: _p.fileType,
         name: _p.name,
         id: _p.name,
-        onValueChange: onValueChange,
+        customHandler: customHandler,
         value: inputState[_p.name],
         maxFiles: _p.maxNoFiles,
         maxFileSize: _p.fileSize,
@@ -326,6 +326,7 @@ function GetInputType(_ref) {
 
     case 'async_select':
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIAsyncSelect, {
+        ref: ref,
         id: _p.name,
         additional: {
           page: 1,
@@ -341,7 +342,7 @@ function GetInputType(_ref) {
         title: _p.title,
         value: inputState[_p.name],
         name: _p.name,
-        onValueChange: onValueChange,
+        customSelectHandler: customHandler,
         inputType: _p.inputType,
         loadOption: _p.loadOption,
         isError: errorArray.indexOf(_p.name) !== -1,
@@ -359,7 +360,7 @@ function GetInputType(_ref) {
     default:
       return null;
   }
-}
+});
 
 var env = utils.configs.env;
 var IUILocalStorageService = utils.services.IUILocalStorageService;
@@ -2425,7 +2426,7 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
   }) : /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
     list: roles,
     value: roleValue,
-    onValueChange: onRoleChange
+    customHandler: onRoleChange
   })))), isProfile && type === 'expense' && fieldsInfo.length === 0 ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: styles.dividerColor
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
@@ -2481,7 +2482,7 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: approversInput,
-      onValueChange: onApproverChange
+      customHandler: onApproverChange
     }));
   }), !isProfile && fieldsInfo.length < maxApprovers ? /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     item: true,
@@ -2527,9 +2528,8 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     placeHolderCheck: fyiApprover !== undefined && fyiApprover.value === '',
     label: travelConstants.FYILabel,
     value: fyiApprover,
-    onValueChange: function onValueChange(_ref) {
-      var _value = _ref._value;
-      return onFYIChange(_value);
+    customSelectHandler: function customSelectHandler(_name, _val) {
+      return onFYIChange(_val);
     },
     loadOption: approversOptions,
     description: travelConstants.FYIDescription,
@@ -2589,9 +2589,7 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
       className: styles.inputWidth,
       id: type + '_' + p.sequence,
       name: type + '_' + p.sequence,
-      onValueChange: function onValueChange(_ref2) {
-        var _name = _ref2._name,
-            _value = _ref2._value;
+      customHandler: function customHandler(_name, _value) {
         return handleOnChangeEditApproverFields(_name, _value, i);
       },
       errorMsg: errMsg[i],
@@ -2634,8 +2632,7 @@ var AddCustomFieldModal = function AddCustomFieldModal(_ref) {
     setCustomLabelValue(isEditMode && editId ? defaultValue : '');
   }, [isEditMode, editId, defaultValue]);
 
-  var addCustomFieldsLabel = function addCustomFieldsLabel(_ref2) {
-    var _value = _ref2._value;
+  var addCustomFieldsLabel = function addCustomFieldsLabel(_name, _value) {
     setCustomLabelValue(_value);
   };
 
@@ -2717,7 +2714,7 @@ var AddCustomFieldModal = function AddCustomFieldModal(_ref) {
     label: "Field label",
     fullwidth: false,
     className: styles$2.inputWidth,
-    onValueChange: addCustomFieldsLabel,
+    customHandler: addCustomFieldsLabel,
     required: true,
     errorMsg: inputValueErr,
     isError: !!inputValueErr,
@@ -2807,7 +2804,7 @@ var CustomFields = function CustomFields(_ref) {
       fullwidth: false,
       defaultValue: inputState["custom" + p.attribute_column],
       name: "custom" + p.attribute_column,
-      onValueChange: onChangeHandler,
+      customHandler: onChangeHandler,
       readOnly: isProfile
     }));
   }), !isProfile && customFields.length > 0 && customFields.length < maxCustomAttributes && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
@@ -2997,7 +2994,7 @@ var workInfo = [{
     value: 'employee_level',
     component: /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
       className: "iui__font--color-link iui__font--weight-500"
-    }, "+ Add Employee Level"),
+    }, "+ Add employee level"),
     callback: null
   }
 }, {
@@ -3042,7 +3039,7 @@ var workInfo = [{
     value: 'entity',
     component: /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
       className: "iui__font--color-link iui__font--weight-500"
-    }, "+ Add Entity"),
+    }, "+ Add entity"),
     callback: null
   }
 }, {
@@ -3064,7 +3061,7 @@ var workInfo = [{
     value: 'business_unit',
     component: /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
       className: "iui__font--color-link iui__font--weight-500"
-    }, "+ Add Business Unit"),
+    }, "+ Add business unit"),
     callback: null
   }
 }, {
@@ -3086,7 +3083,7 @@ var workInfo = [{
     value: 'department',
     component: /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
       className: "iui__font--color-link iui__font--weight-500"
-    }, "+ Add Department"),
+    }, "+ Add department"),
     callback: null
   }
 }, {
@@ -4501,7 +4498,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: passportInfoInput,
-      onValueChange: onPassportInfoInputChange,
+      customHandler: onPassportInfoInputChange,
       dropdownList: dropdownList,
       errorArray: errorArray,
       errorMsg: errorMsgs[p.name],
@@ -4575,7 +4572,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }, val.membership_type === 'flight' ? /*#__PURE__*/React__default.createElement(iuistyles.IUIAsyncSelect, {
       id: "membership-name-" + index,
       name: "membership-name-" + index,
-      title: "Membership number",
+      title: 'Membership number',
       label: "Airline name",
       additional: {
         page: 1
@@ -4584,8 +4581,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
         value: val.name,
         label: val.name ? val.name : 'Enter airline name'
       },
-      onValueChange: function onValueChange(_ref2) {
-        var _value = _ref2._value;
+      customSelectHandler: function customSelectHandler(_name, _value) {
         return onMemInfoInputChange(index, 'name', _value);
       },
       loadOption: airlineOptionsfn,
@@ -4595,8 +4591,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
       placeholder: "Enter hotel name",
       fullwidth: false,
       defaultValue: val.name,
-      onValueChange: function onValueChange(_ref3) {
-        var _value = _ref3._value;
+      customHandler: function customHandler(_name, _value) {
         return onMemInfoInputChange(index, 'name', _value);
       }
     })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
@@ -4612,8 +4607,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
       placeholder: "Enter membership number",
       fullwidth: false,
       defaultValue: val.number,
-      onValueChange: function onValueChange(_ref4) {
-        var _value = _ref4._value;
+      customHandler: function customHandler(_name, _value) {
         return onMemInfoInputChange(index, 'number', _value);
       }
     }), /*#__PURE__*/React__default.createElement(iuistyles.IUIIconButton, {
@@ -4698,7 +4692,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: travelPreferenceInfo,
-      onValueChange: travelPreferenceOnChange,
+      customHandler: travelPreferenceOnChange,
       dropdownList: dropdownList,
       errorArray: errorArray,
       errorMsg: errorMsgs[p.name]
@@ -4740,7 +4734,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: secureTravelInputInfo,
-      onValueChange: onSecureTraveelerInfoInputChange,
+      customHandler: onSecureTraveelerInfoInputChange,
       errorArray: errorArray,
       errorMsg: errorMsgs[p.name]
     }));
@@ -4813,7 +4807,7 @@ function AddPanelDialog(_ref) {
       isOpen = _ref.isOpen,
       closeHandler = _ref.closeHandler,
       submitHandler = _ref.submitHandler,
-      onValueChange = _ref.onValueChange,
+      customHandler = _ref.customHandler,
       isError = _ref.isError,
       isDisabledSubmitBtn = _ref.isDisabledSubmitBtn,
       validation = _ref.validation;
@@ -4846,7 +4840,7 @@ function AddPanelDialog(_ref) {
     label: name + " name",
     name: "name",
     defaultValue: "",
-    onValueChange: onValueChange,
+    customHandler: customHandler,
     placeholder: "",
     validation: validation,
     isError: isError,
@@ -4904,8 +4898,7 @@ var UserAddEdit = function UserAddEdit(props) {
       productAccess = _useState[0],
       setProductAccess = _useState[1];
 
-  var addProductAccessSelected = function addProductAccessSelected(args) {
-    var e = args._event;
+  var addProductAccessSelected = function addProductAccessSelected(e) {
     var value = e.target.value;
     errorArray.splice(errorArray.indexOf('products'), 1);
     errorMsgs.products = '';
@@ -5084,6 +5077,13 @@ var UserAddEdit = function UserAddEdit(props) {
       expenseFYI = _useState20[0],
       setExpenseFYI = _useState20[1];
 
+  var asyncSelectRefs = React.useRef({
+    emp_level: React.useRef(null),
+    entity: React.useRef(null),
+    business_unit: React.useRef(null),
+    department: React.useRef(null)
+  });
+
   var _useState21 = React.useState([]),
       errorArray = _useState21[0],
       setErrorArray = _useState21[1];
@@ -5180,6 +5180,7 @@ var UserAddEdit = function UserAddEdit(props) {
   };
 
   var onModalOpen = function onModalOpen(e, id) {
+    console.log('onModalOpen', e, id);
     var title = '';
 
     if (id === 'entity') {
@@ -5187,16 +5188,11 @@ var UserAddEdit = function UserAddEdit(props) {
     } else if (id === 'department') {
       title = 'Department';
     } else if (id === 'business_unit') {
-      title = 'Business Unit';
+      title = 'Business unit';
     } else if (id === 'employee_level') {
-      title = 'Employee Level';
+      title = 'Employee level';
     }
 
-    console.log(_extends({}, addModalData, {
-      isOpen: true,
-      title: title,
-      id: id
-    }));
     setAddModalData(_extends({}, addModalData, {
       isOpen: true,
       title: title,
@@ -5218,7 +5214,6 @@ var UserAddEdit = function UserAddEdit(props) {
       })).then(function (res) {
         var _extends2;
 
-        console.log(res, "success add " + addModalData.title + " response");
         setAddModalData(_extends({}, addModalData, {
           isOpen: false
         }));
@@ -5228,11 +5223,10 @@ var UserAddEdit = function UserAddEdit(props) {
           value: res.data.value,
           label: res.data.label
         }, _extends2)));
-        console.log('Set new value', res.data.label);
+        asyncSelectRefs.current[tempKey].current.blur();
         clearCacheForAsyncDropdown(function (prevState) {
           var _extends3;
 
-          console.log('ClearCache function called');
           return _extends({}, prevState, (_extends3 = {}, _extends3[tempKey] = prevState[tempKey] + 1, _extends3));
         });
         dispatch(stopLoader());
@@ -5240,11 +5234,8 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   };
 
-  var onFocusOutModalInput = function onFocusOutModalInput(_ref) {
-    var _value = _ref._value;
-
-    var validatedValue = _value.replace(/\s+/g, ' ').trim();
-
+  var onFocusOutModalInput = function onFocusOutModalInput(name, value) {
+    var validatedValue = value.replace(/\s+/g, ' ').trim();
     var error = addModalData.isError;
     setAddModalData(_extends({}, addModalData, {
       value: validatedValue,
@@ -5252,7 +5243,19 @@ var UserAddEdit = function UserAddEdit(props) {
     }));
   };
 
-  var onPersonalInfoChange = function onPersonalInfoChange(args) {
+  var onPersonalInfoChange = function onPersonalInfoChange(_name, _value, _isError, _errorMsg, _obj) {
+    if (_isError === void 0) {
+      _isError = false;
+    }
+
+    if (_errorMsg === void 0) {
+      _errorMsg = '';
+    }
+
+    if (_obj === void 0) {
+      _obj = {};
+    }
+
     try {
       var _temp6 = function _temp6() {
         if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
@@ -5262,15 +5265,6 @@ var UserAddEdit = function UserAddEdit(props) {
         }
       };
 
-      var _name = args._name,
-          _value = args._value,
-          _args$_isError = args._isError,
-          _isError = _args$_isError === void 0 ? false : _args$_isError,
-          _args$_errorMsg = args._errorMsg,
-          _errorMsg = _args$_errorMsg === void 0 ? '' : _args$_errorMsg,
-          _args$_obj = args._obj,
-          _obj = _args$_obj === void 0 ? {} : _args$_obj;
-
       var _temp7 = function () {
         if (_name === 'contact_number') {
           setPersonalInfoInput(_extends({}, personalInfoInput, {
@@ -5292,7 +5286,7 @@ var UserAddEdit = function UserAddEdit(props) {
           var _temp9 = function () {
             if (_name === 'profile_pic') {
               var _temp10 = function () {
-                if (_obj.isUpload) {
+                if (_isError.isUpload) {
                   return Promise.resolve(uploadDocs(_value, _name)).then(function (docsData) {
                     _value = _value.map(function (_val) {
                       var found = docsData.find(function (doc) {
@@ -5306,7 +5300,7 @@ var UserAddEdit = function UserAddEdit(props) {
                       return _val;
                     });
                   });
-                } else if (_obj.isDeleted) {
+                } else if (_isError.isDeleted) {
                   var _deletedFiles = [];
 
                   var _uploadedFiles = uploadedFiles.filter(function (file) {
@@ -5344,13 +5338,9 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   };
 
-  var onEmployeeInfoChange = function onEmployeeInfoChange(args) {
+  var onEmployeeInfoChange = function onEmployeeInfoChange(_name, _value, _isError, _errorMsg, _obj) {
     var _extends6;
 
-    var _name = args._name,
-        _value = args._value,
-        _isError = args._isError,
-        _errorMsg = args._errorMsg;
     setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends6 = {}, _extends6[_name] = _value, _extends6)));
     updateError(_name, _isError, _errorMsg);
 
@@ -5368,10 +5358,9 @@ var UserAddEdit = function UserAddEdit(props) {
     return tag.id;
   };
 
-  var onUserTagTypeChange = function onUserTagTypeChange(args) {
+  var onUserTagTypeChange = function onUserTagTypeChange(e) {
     var _extends8;
 
-    var e = args._event;
     setUserTagType(_extends({}, userTagType, (_extends8 = {}, _extends8[e.target.name] = userTagType[e.target.name] ? false : getUserTagTypeId(e.target.name), _extends8)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, 'userTagType')) {
@@ -5381,27 +5370,21 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   };
 
-  var onCustomFieldsChange = function onCustomFieldsChange(_ref2) {
+  var onCustomFieldsChange = function onCustomFieldsChange(_name, _value) {
     var _extends9;
 
-    var _name = _ref2._name,
-        _value = _ref2._value;
     setCustomFieldsInput(_extends({}, customFieldsInput, (_extends9 = {}, _extends9[_name] = _value, _extends9)));
   };
 
-  var onTravelApproversInputChange = function onTravelApproversInputChange(_ref3) {
+  var onTravelApproversInputChange = function onTravelApproversInputChange(_name, _value) {
     var _extends10;
 
-    var _name = _ref3._name,
-        _value = _ref3._value;
     setTravelApproversInput(_extends({}, travelApproversInput, (_extends10 = {}, _extends10[_name] = _value, _extends10)));
   };
 
-  var onExpenseApproversInputChange = function onExpenseApproversInputChange(_ref4) {
+  var onExpenseApproversInputChange = function onExpenseApproversInputChange(_name, _value) {
     var _extends11;
 
-    var _name = _ref4._name,
-        _value = _ref4._value;
     setExpenseApproversInput(_extends({}, expenseApproversInput, (_extends11 = {}, _extends11[_name] = _value, _extends11)));
   };
 
@@ -5447,13 +5430,9 @@ var UserAddEdit = function UserAddEdit(props) {
     setMembershipInfoInput(_membershipInfoInputTemp);
   };
 
-  var travelPreferenceOnChange = function travelPreferenceOnChange(args) {
+  var travelPreferenceOnChange = function travelPreferenceOnChange(_name, _value, _isError, _errorMsg) {
     var _extends12;
 
-    var _name = args._name,
-        _value = args._value,
-        _isError = args._isError,
-        _errorMsg = args._errorMsg;
     settravelPreferenceInfo(_extends({}, travelPreferenceInfo, (_extends12 = {}, _extends12[_name] = _value, _extends12)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
@@ -5465,13 +5444,9 @@ var UserAddEdit = function UserAddEdit(props) {
     updateError(_name, _isError, _errorMsg);
   };
 
-  var onSecureTraveelerInfoInputChange = function onSecureTraveelerInfoInputChange(args) {
+  var onSecureTraveelerInfoInputChange = function onSecureTraveelerInfoInputChange(_name, _value, _isError, _errorMsg) {
     var _extends14;
 
-    var _name = args._name,
-        _value = args._value,
-        _isError = args._isError,
-        _errorMsg = args._errorMsg;
     setSecureTravelInputInfo(_extends({}, secureTravelInputInfo, (_extends14 = {}, _extends14[_name] = _value, _extends14)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
@@ -5483,7 +5458,19 @@ var UserAddEdit = function UserAddEdit(props) {
     updateError(_name, _isError, _errorMsg);
   };
 
-  var onPassportInfoInputChange = function onPassportInfoInputChange(args) {
+  var onPassportInfoInputChange = function onPassportInfoInputChange(_name, _value, _obj, _isError, _errorMsg) {
+    if (_obj === void 0) {
+      _obj = {};
+    }
+
+    if (_isError === void 0) {
+      _isError = false;
+    }
+
+    if (_errorMsg === void 0) {
+      _errorMsg = '';
+    }
+
     try {
       var _temp14 = function _temp14() {
         var _extends16;
@@ -5499,15 +5486,6 @@ var UserAddEdit = function UserAddEdit(props) {
         updateError(_name, _isError, _errorMsg);
       };
 
-      var _name = args._name,
-          _value = args._value,
-          _args$_isError2 = args._isError,
-          _isError = _args$_isError2 === void 0 ? false : _args$_isError2,
-          _args$_errorMsg2 = args._errorMsg,
-          _errorMsg = _args$_errorMsg2 === void 0 ? '' : _args$_errorMsg2,
-          _args$_obj2 = args._obj,
-          _obj = _args$_obj2 === void 0 ? {} : _args$_obj2;
-
       if ((_name === 'passport_photo' || _name === 'travel_docs') && _obj.openFile === true) {
         if (_obj.file.isExistingFile) {
           var link = document.createElement('a');
@@ -6575,7 +6553,7 @@ var UserAddEdit = function UserAddEdit(props) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: personalInfoInput,
-      onValueChange: onPersonalInfoChange,
+      customHandler: onPersonalInfoChange,
       dropdownList: dropdownList,
       dateFormat: dateFormat,
       countryCode: countryCode,
@@ -6624,13 +6602,14 @@ var UserAddEdit = function UserAddEdit(props) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: employeeInfoInput,
-      onValueChange: onEmployeeInfoChange,
+      customHandler: onEmployeeInfoChange,
       dropdownList: dropdownList,
       dateFormat: dateFormat,
       countryCode: countryCode,
       errorArray: errorArray,
       errorMsg: errorMsgs[p.name],
-      showNaOption: !p.required
+      showNaOption: !p.required,
+      ref: asyncSelectRefs.current[p.name]
     }));
   }), renderFields.userTagType.length ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     container: true,
@@ -6654,7 +6633,7 @@ var UserAddEdit = function UserAddEdit(props) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: userTagType,
-      onValueChange: onUserTagTypeChange
+      customHandler: onUserTagTypeChange
     }));
   }))) : null))), /*#__PURE__*/React__default.createElement(CustomFields, {
     inputState: customFieldsInput,
@@ -6697,7 +6676,7 @@ var UserAddEdit = function UserAddEdit(props) {
     }, /*#__PURE__*/React__default.createElement(GetInputType, {
       _p: p,
       inputState: productAccess,
-      onValueChange: addProductAccessSelected
+      customHandler: addProductAccessSelected
     }));
   }), errorArray.indexOf('products') !== -1 && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     item: true,
@@ -6717,10 +6696,7 @@ var UserAddEdit = function UserAddEdit(props) {
     addFields: function addFields() {
       return dispatch(addTravelApproverField());
     },
-    onRoleChange: function onRoleChange(_ref5) {
-      var _value = _ref5._value;
-      return setTravelRole(_value);
-    },
+    onRoleChange: setTravelRole,
     roleValue: travelRole,
     approversInput: travelApproversInput,
     onApproverChange: onTravelApproversInputChange,
@@ -6758,10 +6734,7 @@ var UserAddEdit = function UserAddEdit(props) {
     addFields: function addFields() {
       return dispatch(addExpenseApproverField());
     },
-    onRoleChange: function onRoleChange(_ref6) {
-      var _value = _ref6._value;
-      return setExpenseRole(_value);
-    },
+    onRoleChange: setExpenseRole,
     roleValue: expenseRole,
     approversInput: expenseApproversInput,
     onApproverChange: onExpenseApproversInputChange,
@@ -6780,7 +6753,7 @@ var UserAddEdit = function UserAddEdit(props) {
     isOpen: addModalData.isOpen,
     isError: addModalData.isError,
     closeHandler: onAddModalClose,
-    onValueChange: onFocusOutModalInput,
+    customHandler: onFocusOutModalInput,
     submitHandler: onAddModalSubmit,
     validation: modalValidation
   }));
@@ -9252,7 +9225,7 @@ function EditPanelDialog(_ref) {
 
   var isOpen = _ref.isOpen,
       closeHandler = _ref.closeHandler,
-      onValueChange = _ref.onValueChange,
+      customHandler = _ref.customHandler,
       submitHandler = _ref.submitHandler,
       isError = _ref.isError,
       name = _ref.name,
@@ -9293,7 +9266,7 @@ function EditPanelDialog(_ref) {
     label: name + " name",
     name: "name",
     defaultValue: dialogData.data.name,
-    onValueChange: onValueChange,
+    customHandler: customHandler,
     placeholder: "",
     isError: isError,
     validation: validation,
@@ -9310,7 +9283,7 @@ function MoveUserDialog(_ref) {
       isOpen = _ref.isOpen,
       closeHandler = _ref.closeHandler,
       submitHandler = _ref.submitHandler,
-      onValueChange = _ref.onValueChange,
+      customSelectHandler = _ref.customSelectHandler,
       value = _ref.value,
       isError = _ref.isError,
       isDisabledSubmitBtn = _ref.isDisabledSubmitBtn;
@@ -9376,7 +9349,7 @@ function MoveUserDialog(_ref) {
     value: value,
     name: name,
     isMove: isMove,
-    onValueChange: onValueChange,
+    customSelectHandler: customSelectHandler,
     loadOption: commonLoadOptionsUM,
     isError: isError,
     errorMsg: "Please select " + (name === null || name === void 0 ? void 0 : name.toLowerCase()) + ".",
@@ -9522,11 +9495,8 @@ var UserPanel = function UserPanel(_ref) {
       isTokenVerified = _useSelector2.isTokenVerified,
       hasVerificationError = _useSelector2.hasVerificationError;
 
-  var onValueChange = function onValueChange(_ref2) {
-    var _value = _ref2._value;
-
-    var validatedValue = _value.replace(/\s+/g, ' ').trim();
-
+  var customHandler = function customHandler(name, value) {
+    var validatedValue = value.replace(/\s+/g, ' ').trim();
     setDataList(validatedValue);
   };
 
@@ -9706,9 +9676,8 @@ var UserPanel = function UserPanel(_ref) {
     }
   };
 
-  var customMoveSelectHandler = function customMoveSelectHandler(_ref3) {
-    var _value = _ref3._value;
-    setSelectValue(_value);
+  var customMoveSelectHandler = function customMoveSelectHandler(name, value) {
+    setSelectValue(value);
   };
 
   var closeMoveModal = function closeMoveModal() {
@@ -9772,7 +9741,7 @@ var UserPanel = function UserPanel(_ref) {
     name: title,
     isOpen: addModal,
     isError: errorAdd,
-    onValueChange: onValueChange,
+    customHandler: customHandler,
     closeHandler: closeDeActivateModal,
     submitHandler: handleAddUserPanel,
     isDisabledSubmitBtn: loading,
@@ -9783,10 +9752,12 @@ var UserPanel = function UserPanel(_ref) {
     list: dropdownList,
     value: selectValue,
     data: dialogData.data,
+    customHandler: customHandler,
     closeHandler: closeDeleteModal,
     submitHandler: handleDeletePanel,
     isDisabledSubmitBtn: loading,
-    isError: errorMove
+    isError: errorMove,
+    customSelectHandler: customMoveSelectHandler
   }), /*#__PURE__*/React__default.createElement(DeletePanelModal$1, {
     name: title,
     isOpen: alertModal,
@@ -9800,16 +9771,17 @@ var UserPanel = function UserPanel(_ref) {
     isOpen: moveModal,
     data: dialogData.data,
     value: selectValue,
-    onValueChange: customMoveSelectHandler,
+    customHandler: customHandler,
     closeHandler: closeMoveModal,
     submitHandler: handleMovePanel,
     isError: errorMove,
-    isDisabledSubmitBtn: loading
+    isDisabledSubmitBtn: loading,
+    customSelectHandler: customMoveSelectHandler
   }), /*#__PURE__*/React__default.createElement(EditPanelDialog, {
     name: title,
     isOpen: editModal,
     data: dialogData.data,
-    onValueChange: onValueChange,
+    customHandler: customHandler,
     closeHandler: closeEditDialog,
     submitHandler: handleEditPanel,
     isError: errorEdit,