@engagebay/engagebay-form-module 1.0.2-beta.10 → 1.0.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.2-beta.10",
+    "version": "1.0.2-beta.2",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -16,6 +16,7 @@
         "@heroicons/react": ">=2.1.5",
         "@reduxjs/toolkit": ">=2.2.7",
         "@tippyjs/react": ">=4.2.6",
+        "@types/lodash": ">=4.17.7",
         "@types/react-redux": ">=7.1.33",
         "axios": ">=1.7.2",
         "clsx": ">=2.1.1",
@@ -31,6 +32,7 @@
         "@heroicons/react": ">=2.1.5",
         "@reduxjs/toolkit": ">=2.2.7",
         "@tippyjs/react": ">=4.2.6",
+        "@types/lodash": ">=4.17.7",
         "@types/react-redux": ">=7.1.33",
         "axios": ">=1.7.2",
         "clsx": ">=2.1.1",

package/src/api/index.ts

@@ -1,16 +1,10 @@
 import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
 import {FormFieldSchema} from "../form/schema/FormFieldSchema";
 
-let baseURL;
-try {
-    baseURL = (window as any).DEFAULT_HOST ||
-        (window as any).parent.DEFAULT_HOST
-} catch (error) {
-    
-}
-
 const BASE_API: AxiosRequestConfig = {
-    baseURL: baseURL ??  "",
+    baseURL:
+        (window as any).REACHO_BASE_URL ||
+        (window as any).parent.REACHO_BASE_URL,
     timeout: 30000,
     headers: {
         "Content-Type": "application/json",

package/src/form/FormFieldUtils.ts

@@ -34,7 +34,6 @@ import {
     FormFieldType,
     OptionMappingConfig,
 } from "./schema/FormFieldSchema";
-import Typeahead2 from "./formfields/Typeahead2";
 
 /**
  * @property {React.FC<FormFieldComponentPropSchema>} component - React component for a form field.
@@ -140,9 +139,6 @@ const formFieldComponents: FormComponentSchema = {
     [FormFieldType[FormFieldType.TYPEAHEAD_MULTI_SELECT]]: {
         component: TypeaheadMultiSelect,
     },
-    [FormFieldType[FormFieldType.TYPEAHEAD_2]]: {
-        component: Typeahead2,
-    },
     [FormFieldType[FormFieldType.COMBO_SELECT]]: {
         component: ComboSelect,
     },

package/src/form/formfields/BusinessHoursField.tsx

@@ -21,6 +21,7 @@ import FormField from "../FormField";
 import RenderFormField from "../util/RenderFormField";
 import { TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Tippy from "@tippyjs/react";
+import { set } from "lodash";
 
 const defaultBusinessHours = {
   MONDAY: {
@@ -123,8 +124,9 @@ export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (
             <div className="w-full sm:w-full text-end mr-[2.3em]">
               <button
                 type="button"
-                className={`text-end text-primary cursor-pointer font-[13px] font-medium ${getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ""
-                  }`}
+                className={`text-end text-primary cursor-pointer font-[13px] font-medium ${
+                  getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ""
+                }`}
                 onClick={() => {
                   const lastEndTime =
                     getValues(`${mappedName}.sessions`)?.[

package/src/form/formfields/DatePickerField.tsx

@@ -8,7 +8,7 @@ import { handleChange, registerFormField } from "../util";
 import moment from "moment";
 
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema,
+  props: FormFieldComponentPropSchema
 ) => {
   const formContext = useContext(FormContext);
   const initialDate = formContext.getValues(props.fieldConfig.name)
@@ -25,38 +25,24 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
     ) {
       formContext.setValue(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue,
+        props.fieldConfig.defaultValue
       );
     }
   }, [props.fieldConfig.forceUpdate]);
 
   let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-  //registerOptions.valueAsDate = true;
+
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
   function getInput() {
-    const rawStart =
-      initialDate?.startDate ||
-      props.fieldConfig.defaultValue ||
-      "";
-    const rawEnd =
-      initialDate?.endDate ||
-      props.fieldConfig.defaultValue ||
-      "";
-    const toDate = (v: string | Date | null | undefined): Date | null => {
-      if (v == null || v === "") return null;
-      return moment(v).isValid() ? moment(v).toDate() : null;
-    };
-    const value = {
-      startDate: toDate(rawStart),
-      endDate: toDate(rawEnd),
-    };
-    // Calendar opens on selected date's month/year (must be a Date instance)
-    const startFrom = value.startDate instanceof Date ? value.startDate : new Date();
     return (
       <Datepicker
-        value={value}
-        startFrom={startFrom}
+        value={
+          initialDate || {
+            startDate: props.fieldConfig.defaultValue,
+            endDate: props.fieldConfig.defaultValue,
+          }
+        }
         {...hookProps}
         placeholder={
           props.fieldConfig.placeholder
@@ -67,7 +53,13 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         popoverDirection="down"
         useRange={false}
         inputName={props.fieldConfig.name}
-        key={props.fieldConfig.name + "_" + rawStart + "_" + rawEnd}
+        key={
+          props.fieldConfig.name +
+          "_" +
+          initialDate.startDate +
+          "_" +
+          initialDate.endDate
+        }
         containerClassName={"relative"}
         minDate={props.fieldConfig.minDate}
         maxDate={props.fieldConfig.maxDate}

package/src/form/formfields/NumberField.tsx

@@ -1,62 +1,61 @@
-import React, { useContext } from "react";
-import { RegisterOptions } from "react-hook-form";
-import { FormContext } from "../context/FormContext";
-import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
-import { handleChange, registerFormField } from "../util";
+import React, {useContext} from "react";
+import {RegisterOptions} from "react-hook-form";
+import {FormContext} from "../context/FormContext";
+import {FormFieldComponentPropSchema} from "../schema/FormFieldSchema";
+import {handleChange, registerFormField} from "../util";
 import RenderFormField from "../util/RenderFormField";
 
 const NumberField: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema,
+    props: FormFieldComponentPropSchema
 ) => {
-  const formContext = useContext(FormContext);
+    const formContext = useContext(FormContext);
 
-  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-  registerOptions.valueAsNumber = true;
-  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+    function getInput() {
+        return (
+            <input
+                type="number"
+                {...hookProps}
+                placeholder={props.fieldConfig?.placeholder}
+                readOnly={props.fieldConfig?.readOnly}
+                disabled={props.fieldConfig?.disabled}
+                autoComplete={props.fieldConfig?.autoComplete}
+                min={props.fieldConfig?.min}
+                max={props.fieldConfig?.max}
+                step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
+                defaultValue={props.fieldConfig.defaultValue as string}
+                className={`form-input ${
+                    props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
+                }`}
+                onKeyDown={(e) => {
+                    props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+                }}
+                onChange={(e) => {
+                    let value = e.target.value;
+                    let numericValue = parseFloat(value);
+                    if (props.fieldConfig.max !== undefined && numericValue > props.fieldConfig.max) {
+                        numericValue = props.fieldConfig.max;
+                    }
+                    if (props.fieldConfig.min !== undefined && numericValue < props.fieldConfig.min) {
+                        numericValue = props.fieldConfig.min;
+                    }
+                    value = numericValue.toString();
+                    handleChange(
+                        value,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+            />
+        );
+    }
 
-  function getInput() {
     return (
-      <input
-        type="number"
-        {...hookProps}
-        placeholder={props.fieldConfig?.placeholder}
-        readOnly={props.fieldConfig?.readOnly}
-        disabled={props.fieldConfig?.disabled}
-        autoComplete={props.fieldConfig?.autoComplete}
-        min={props.fieldConfig?.min}
-        max={props.fieldConfig?.max}
-        step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
-        defaultValue={props.fieldConfig.defaultValue as string}
-        className={`form-input ${
-          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
-        }`}
-        onKeyDown={(e) => {
-          props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
-        }}
-        onChange={(e) => {
-          let value = e.target.value;
-          let numericValue = parseFloat(value);
-          if (
-            props.fieldConfig.max !== undefined &&
-            numericValue > props.fieldConfig.max
-          ) {
-            numericValue = props.fieldConfig.max;
-          }
-          if (
-            props.fieldConfig.min !== undefined &&
-            numericValue < props.fieldConfig.min
-          ) {
-            numericValue = props.fieldConfig.min;
-          }
-          value = numericValue.toString();
-          handleChange(value, formContext, props.fieldConfig, props.onChange);
-        }}
-      />
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
     );
-  }
-
-  return (
-    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
-  );
 };
 export default NumberField;

package/src/form/formfields/Typeahead.tsx

@@ -58,6 +58,8 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
         let url = props.fieldConfig.fetchUrl;
         if (_query) {
           url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+        } else {
+          url = url.includes("?") ? url + "&q=" + null : url + "?q=" + null;
         }
 
         let response = await (props.fieldConfig.disableHeaderInFetch
@@ -97,9 +99,7 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
       let url = props.fieldConfig.fetchUrl;
 
       if (value)
-        url = url.includes("?")
-          ? url + "&values=" + value
-          : url + "?values=" + value;
+        url = url.includes("?") ? url + "&q=" + value : url + "?q=" + value;
 
       let response = await (props.fieldConfig.disableHeaderInFetch
         ? axios.get(url)

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -60,6 +60,8 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
         let url = props.fieldConfig.fetchUrl;
         if (_query) {
           url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+        } else {
+          url = url.includes("?") ? url + "&q=" + null : url + "?q=" + null;
         }
         const axiosInstance = getAxiosInstance(
           formContext.axiosInstance,
@@ -108,9 +110,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
 
       let url = props.fieldConfig.fetchUrl;
 
-      url = url.includes("?")
-        ? url + "&values=" + value
-        : url + "?values=" + value;
+      url = url = url.includes("?") ? url + "&q=" + value : url + "?q=" + value;
 
       let response = await (props.fieldConfig.disableHeaderInFetch
         ? axios.get(url)
@@ -126,16 +126,16 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
             ...data,
             props.fieldConfig.dropdownFieldConfig?.isSuggestionBox && values
               ? values
-                .filter(
-                  (value) =>
-                    data.some((d) => d.value !== value) || data.length == 0,
-                )
-                .map((val) => ({ label: val, value: val }))
+                  .filter(
+                    (value) =>
+                      data.some((d) => d.value !== value) || data.length == 0,
+                  )
+                  .map((val) => ({ label: val, value: val }))
               : [],
           ].flat(),
         );
       }
-    } catch (err) { }
+    } catch (err) {}
   };
 
   const updateListOptions = (data: any) => {
@@ -179,7 +179,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
           className={
             props.fieldConfig.customClassNames?.fieldClassName
               ? "form-listbox-select " +
-              props.fieldConfig.customClassNames?.fieldClassName
+                props.fieldConfig.customClassNames?.fieldClassName
               : "form-listbox-select"
           }
         >

package/src/form/schema/FormFieldSchema.ts

@@ -37,7 +37,6 @@ export enum FormFieldType {
     DYNAMIC_MULTI_SELECT = "DYNAMIC_MULTI_SELECT",
 
     TYPEAHEAD = "TYPEAHEAD",
-    TYPEAHEAD_2 = "TYPEAHEAD_2",
     TYPEAHEAD_MULTI_SELECT = "TYPEAHEAD_MULTI_SELECT",
     PHONE_NUMBER_INPUT = "PHONE_NUMBER_INPUT",
     SWITCH = "SWITCH",
@@ -130,13 +129,10 @@ export type FormFieldSchema = {
     submitOnChange?: boolean;
     formFieldPattern?: FormFieldPatternsImpl[];
     fetchUrl?: string;
-    fetchSavedDataUrl?: string;
     postUrl?: string;
     fileAccept?: string;
     icon?: ReactNode;
     outputFormat?: OutputFormatType;
-    isMultiple?: boolean;
-    allowedMinQueryLength?: number;
     children?: FormFieldSchema[];
     defaultOptions?: FieldOptionsSchema[];
     optionsConfig?: OptionMappingConfig;

package/src/form/util/RenderListOptions.tsx

@@ -102,15 +102,15 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     const filteredList = query
       ? resultList.filter((item) => {
-        const normalizedLabel = fieldConfig.dropdownFieldConfig
-          ?.isCaseSensitive
-          ? item.label
-          : item.label.toLowerCase();
+          const normalizedLabel = fieldConfig.dropdownFieldConfig
+            ?.isCaseSensitive
+            ? item.label
+            : item.label.toLowerCase();
 
-        return normalizedLabel
-          .replace(/\s+/g, "")
-          .includes(caseSensitive.replace(/\s+/g, ""));
-      })
+          return normalizedLabel
+            .replace(/\s+/g, "")
+            .includes(caseSensitive.replace(/\s+/g, ""));
+        })
       : resultList;
 
     let nullGroupOptions: any[] = [];
@@ -127,15 +127,13 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     }, {});
 
     const handleQueryCallback = useCallback(() => {
-      if (filteredList.length < 5 && isTypeahead) {
+      if (filteredList.length == 0 && isTypeahead) {
         queryCallback && queryCallback(query);
       }
     }, [filteredList]);
 
     useEffect(() => {
-      if (formField == FormFieldType.TYPEAHEAD_2)
-        queryCallback && queryCallback(query);
-      else handleQueryCallback();
+      handleQueryCallback();
     }, [query]);
 
     let enableCreateFlag =
@@ -145,7 +143,6 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     let validTypeaheadFields = [
       FormFieldType.TYPEAHEAD,
-      FormFieldType.TYPEAHEAD_2,
       FormFieldType.TYPEAHEAD_MULTI_SELECT,
     ];
     let isTypeahead: boolean = validTypeaheadFields.indexOf(formField) > -1;
@@ -169,10 +166,11 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
           key={option.value}
           disabled={option.isDisabled}
           onClick={() => setTimeout(resetToDefault, 300)}
-          className={`form-listbox-option ${selected
-            ? " bg-gray-100 text-gray-900"
-            : "hover:bg-gray-100 text-gray-700"
-            }`}
+          className={`form-listbox-option ${
+            selected
+              ? " bg-gray-100 text-gray-900"
+              : "hover:bg-gray-100 text-gray-700"
+          }`}
           value={option.value}
         >
           {fieldConfig.fieldOptionWrapper ? (
@@ -181,8 +179,9 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
             <>
               <div className="flex items-center justify-between gap-x-1.5">
                 <span
-                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${selected ? "font-medium" : "font-normal"
-                    }`}
+                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${
+                    selected ? "font-medium" : "font-normal"
+                  }`}
                 >
                   {option.icon && (
                     <span className="listbox-svg">{option.icon}</span>
@@ -204,7 +203,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )}
                 </span>
                 {isTypeahead &&
-                  !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
+                !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
                   <input
                     type="checkbox"
                     className="form-checkbox"
@@ -400,28 +399,28 @@ export function renderListBoxValue(
           {values.length > 1
             ? `${values.length} selected`
             : listOptions.find((option) => option.value == value[0])?.label ||
-            values[0]}
+              values[0]}
         </span>
         {getDeleteButton()}
       </span>
     ) : (
       Array.isArray(values) &&
-      values.map((opt: any) => {
-        const option = listOptions.find((option) => option.value == opt);
-        if (!option && values.length == 0) return getPlaceholder();
+        values.map((opt: any) => {
+          const option = listOptions.find((option) => option.value == opt);
+          if (!option && values.length == 0) return getPlaceholder();
 
-        return (
-          <span key={option?.value} className="form-selected-badge">
-            <Tippy content={option?.label} delay={500}>
-              <span className="form-selected-badge-name">
-                {option?.label}
-              </span>
-            </Tippy>
+          return (
+            <span key={option?.value} className="form-selected-badge">
+              <Tippy content={option?.label} delay={500}>
+                <span className="form-selected-badge-name">
+                  {option?.label}
+                </span>
+              </Tippy>
 
-            {getDeleteButton(opt)}
-          </span>
-        );
-      })
+              {getDeleteButton(opt)}
+            </span>
+          );
+        })
     );
   };
   const getDeleteButton = (option?: string) => {
@@ -453,10 +452,9 @@ export function renderListBoxValue(
       )
     );
   };
-  let outputFormat =
-    fieldConfig.outputFormat != undefined
-      ? fieldConfig.outputFormat === OutputFormatType.STRING
-      : false;
+  let outputFormat = fieldConfig.outputFormat
+    ? fieldConfig.outputFormat === OutputFormatType.ARRAY
+    : false;
   const getPlaceholder = () => (
     <span className="form-placeholder">
       {fieldConfig.placeholder || "Select any option"}

package/src/form/formfields/Typeahead2.tsx

@@ -1,283 +0,0 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import { Listbox, ListboxButton } from "@headlessui/react";
-import { RegisterOptions } from "react-hook-form";
-
-import { FormContext } from "../context/FormContext";
-import { getListOption, getListOptions } from "../FormFieldUtils";
-import {
-  FieldOptionsSchema,
-  FormFieldComponentPropSchema,
-  FormFieldType,
-} from "../schema/FormFieldSchema";
-import { handleChange, registerFormField } from "../util";
-import RenderFormField from "../util/RenderFormField";
-import RenderListOptions, {
-  renderListBoxValue,
-} from "../util/RenderListOptions";
-import axios from "axios";
-import { getAxiosInstance } from "../../api";
-
-const Typeahead2: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema,
-) => {
-  const dynamicSelectRef = useRef<HTMLUListElement>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const formContext = useContext(FormContext);
-  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
-  const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
-  const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
-    [],
-  );
-  const [loading, setLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (
-      !formContext.getValues(props.fieldConfig.name) &&
-      props.fieldConfig.defaultValue
-    ) {
-      formContext.setValue(
-        props.fieldConfig.name,
-        props.fieldConfig.defaultValue,
-      );
-    }
-    let values: any | any[] | undefined =
-      formContext.getValues(props.fieldConfig.name) ||
-      props.fieldConfig.defaultValue;
-
-    if (values && selectedValues.length < 1) {
-      if (props.fieldConfig.fetchSavedDataUrl) {
-        fetchValue(values);
-      } else {
-        setSelectedValues(
-          Array.isArray(values)
-            ? values.map((val: any) => ({ label: val, value: val }))
-            : [values],
-        );
-      }
-    }
-  }, []);
-
-
-
-  const fetchData = useMemo(() => {
-    let timeoutId: ReturnType<typeof setTimeout>;
-
-    return (_query: string | undefined) => {
-      // Clear the previous timer
-      if (timeoutId) clearTimeout(timeoutId);
-
-      // Set a new timer
-      timeoutId = setTimeout(async () => {
-        // 1. Cancel the previous request if it's still pending
-        if (abortControllerRef.current) {
-          abortControllerRef.current.abort();
-        }
-
-        // 2. Create a new controller for the current request
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-
-        if (!_query || (props.fieldConfig.allowedMinQueryLength && _query.length < props.fieldConfig.allowedMinQueryLength) || _query.length < 3) {
-          setListOptions([]);
-          setLoading(false);
-          return;
-        }
-        setLoading(true);
-        try {
-          if (!props.fieldConfig.fetchUrl) return;
-
-          let url = props.fieldConfig.fetchUrl;
-
-          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
-
-          const axiosInstance = getAxiosInstance(
-            formContext.axiosInstance,
-            props.fieldConfig,
-          );
-          const response = await axiosInstance.get(url);
-
-          if (controller === abortControllerRef.current) {
-            if (response?.data) {
-              const data: FieldOptionsSchema[] = getListOptions(
-                response?.data,
-                props.fieldConfig.optionsConfig,
-              );
-              setListOptions([...data]);
-
-              if (props.fieldConfig.fetchCallback) {
-                props.fieldConfig.fetchCallback(response);
-              }
-            }
-          }
-        } catch (err) {
-          console.error("Fetch error:", err);
-        } finally {
-          // Only stop loading if this was the "active" request
-          if (controller === abortControllerRef.current) {
-            setLoading(false);
-          }
-        }
-      }, 250);
-    };
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, []);
-
-  const fetchValue = async (value: string | any | any[]) => {
-    try {
-      if (
-        props.fieldConfig.ignoreFetchValue ||
-        !props.fieldConfig.fetchSavedDataUrl
-      ) {
-        return;
-      }
-
-      let url = props.fieldConfig.fetchSavedDataUrl;
-
-      // url = url.includes("?")
-      //   ? url + "&values=" + value
-      //   : url + "?values=" + value;
-
-      let response = await (props.fieldConfig.disableHeaderInFetch
-        ? axios.post(url, Array.isArray(value) ? value : [value])
-        : formContext.axiosInstance?.post(
-          url,
-          Array.isArray(value) ? value : [value],
-        ));
-      if (response?.data) {
-        const data: FieldOptionsSchema[] = getListOptions(
-          response?.data,
-          props.fieldConfig.optionsConfig,
-        );
-        let values: any[] = formContext.getValues(props.fieldConfig.name) || [];
-        setSelectedValues(
-          [
-            ...data,
-            props.fieldConfig.dropdownFieldConfig?.isSuggestionBox &&
-              values &&
-              Array.isArray(values)
-              ? values
-                .filter(
-                  (value) =>
-                    data.some((d) => d.value !== value) || data.length == 0,
-                )
-                .map((val) => ({ label: val, value: val }))
-              : [],
-          ].flat(),
-        );
-      }
-    } catch (err) { }
-  };
-
-  const updateListOptions = (data: any) => {
-    const resData: FieldOptionsSchema = getListOption(
-      data,
-      props.fieldConfig.optionsConfig,
-    );
-    setListOptions([]);
-    setSelectedValues((prev) =>
-      props.fieldConfig.isMultiple ? [...prev, resData] : [resData],
-    );
-    let result = formContext.getValues(props.fieldConfig.name) || [];
-    result = !props.fieldConfig.isMultiple
-      ? resData.value
-      : result.includes(resData.value)
-        ? [...result.filter((v: string) => v != resData.value), resData.value]
-        : [...result, resData.value];
-    formContext.setValue(props.fieldConfig.name, result);
-  };
-
-  const getInput = () => {
-    return (
-      <Listbox
-        as={"div"}
-        {...hookProps}
-        value={
-          props.fieldConfig.isMultiple
-            ? formContext.getValues(props.fieldConfig.name)
-              ? formContext.getValues(props.fieldConfig.name)
-              : []
-            : formContext.getValues(props.fieldConfig.name)
-        }
-        name={props.fieldConfig.name}
-        defaultValue={props.fieldConfig.defaultValue}
-        key={props.fieldConfig.name}
-        className={"relative form-listbox flex-1 overflow-hidden"}
-        onChange={(selectedOptions) => {
-          let currentValue = formContext.getValues(props.fieldConfig.name);
-          const newValue =
-            currentValue === selectedOptions ? null : selectedOptions;
-
-          if (props.fieldConfig.isMultiple) {
-            currentValue = listOptions.filter((op) =>
-              selectedOptions.includes(op.value),
-            );
-            setSelectedValues((prev) => [...prev, ...currentValue]);
-          } else {
-            const selected = listOptions.find((o) => o.value == newValue);
-            selected && setSelectedValues([selected]);
-          }
-          setListOptions([]);
-          handleChange(
-            newValue,
-            formContext,
-            props.fieldConfig,
-            props.onChange,
-          );
-        }}
-        multiple={props.fieldConfig.isMultiple}
-      >
-        <ListboxButton
-          className={
-            props.fieldConfig.customClassNames?.fieldClassName
-              ? "form-listbox-select " +
-              props.fieldConfig.customClassNames?.fieldClassName
-              : "form-listbox-select"
-          }
-        >
-          {renderListBoxValue(
-            formContext,
-            props.fieldConfig,
-            [...selectedValues, ...listOptions],
-            props.onChange,
-          )}
-        </ListboxButton>
-        <RenderListOptions
-          formContext={formContext}
-          onChange={props.onChange}
-          formField={FormFieldType.TYPEAHEAD_2}
-          ref={dynamicSelectRef}
-          fieldConfig={props.fieldConfig}
-          listOptions={listOptions}
-          setListOptions={setListOptions}
-          loading={loading}
-          setLoading={setLoading}
-          createCallback={(data) => updateListOptions(data)}
-          queryCallback={(query) => fetchData(query)}
-        />
-      </Listbox>
-    );
-  };
-  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
-    return <></>;
-  }
-
-  return (
-    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
-  );
-};
-export default Typeahead2;