react-core-ts 2.0.13 → 2.0.15

package/src/ReactAutoCompleteTableView.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { FieldErrors } from "react-hook-form";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FieldErrors } from 'react-hook-form';
 
-import CustomIcons from "./components/customIcons";
-import Spinner from "./components/loader/Spinner";
-import Portal from "./components/portal";
-import { debounce } from "./utilities/debounce";
-import { applyPositionClass } from "./utilities/getPosition";
-import { DropArrow } from "./utilities/icons";
+import CustomIcons from './components/customIcons';
+import Spinner from './components/loader/Spinner';
+import Portal from './components/portal';
+import { debounce } from './utilities/debounce';
+import { applyPositionClass } from './utilities/getPosition';
+import { AllDropArrow, DropArrow } from './utilities/icons';
 
 type valueProps = {
   id?: string | number;
@@ -49,6 +49,7 @@ interface AutoSuggestionInputProps {
   width?: number;
   labelTitle?: string;
   isModern?: boolean;
+  autoDropdown?: boolean;
   size?: "xs" | "sm" | "md" | "lg" | "xxs";
   tableView?: boolean;
   dropdownMinWidth?: number; // Minimum additional width in pixels to add to dropdown
@@ -73,11 +74,12 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   placeholder,
   id,
   className: propsClassName,
-  type = "custom_select",
+  type = 'custom_select',
   readOnly,
   disabled = false,
   value,
   autoFilter = false,
+  autoDropdown = true,
   insideOpen = false,
   isClose = true,
   noLocalFilter = false,
@@ -112,6 +114,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
   const scrollContainerRef = useRef<HTMLUListElement | null>(null);
+  const [refetchData, setRefetchData] = useState(false);
   const [dropPosition, setDropPosition] = useState<any>({
     top: 0,
     left: 0,
@@ -132,8 +135,8 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     ) => {
       return substring &&
         mainString &&
-        typeof mainString === "string" &&
-        typeof subString === "string"
+        typeof mainString === 'string' &&
+        typeof subString === 'string'
         ? mainString
             .toString()
             .toLowerCase()
@@ -148,23 +151,23 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     return (
       checkIncludesIfExists(mainString, subString) ||
       (!!checkParams &&
-        ((checkArrayContains(checkParams, "param1") &&
+        ((checkArrayContains(checkParams, 'param1') &&
           checkIncludesIfExists(param1, subString)) ||
-          (checkArrayContains(checkParams, "param2") &&
+          (checkArrayContains(checkParams, 'param2') &&
             checkIncludesIfExists(param2, subString)) ||
-          (checkArrayContains(checkParams, "param3") &&
+          (checkArrayContains(checkParams, 'param3') &&
             checkIncludesIfExists(param3, subString)) ||
-          (checkArrayContains(checkParams, "param4") &&
+          (checkArrayContains(checkParams, 'param4') &&
             checkIncludesIfExists(param4, subString))))
     );
   };
 
   const getHeight = () => {
     switch (size) {
-      case "sm":
-        return " h-[34px] ";
+      case 'sm':
+        return ' h-[34px] ';
       default:
-        return " ";
+        return ' ';
     }
   };
 
@@ -175,8 +178,8 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     setInputValue(value);
     handleValChange(value);
     if (!value) {
-      setInputValue("");
-      onChange({ id: undefined, name: "", from: 2 });
+      setInputValue('');
+      onChange({ id: undefined, name: '', from: 2 });
     }
   };
 
@@ -184,11 +187,11 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     debounce(
       (value: string) => {
         setDropOpen(true);
-        onChange({ id: undefined, name: "", from: 1 });
-        if (value.trim() === "" && type === "auto_complete") {
+        onChange({ id: undefined, name: '', from: 1 });
+        if (value.trim() === '' && type === 'auto_complete') {
           setSuggestions([]);
           if (autoFilter) {
-            handleDropData("*");
+            handleDropData('*');
           } else {
             setDropOpen(false);
           }
@@ -204,11 +207,11 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     []
   );
   const handleDropData = (value?: string) => {
-    if (type === "auto_complete") {
+    if (type === 'auto_complete') {
       if (isStaticList) {
         loadStaticData();
         const filteredData =
-          value && value !== "*"
+          value && value !== '*'
             ? data?.filter((item) =>
                 checkIncludes(
                   item.name,
@@ -220,15 +223,17 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
               )
             : data;
         setSuggestions(filteredData);
-      } else handlePickSuggestions(value);
+      } else {
+        handlePickSuggestions(value);
+      }
     } else if (
-      (type === "custom_select" || type === "custom_search_select") &&
+      (type === 'custom_select' || type === 'custom_search_select') &&
       (!data || data?.length === 0)
     ) {
       handlePickSuggestions();
-    } else if (type === "custom_search_select" && data && data?.length > 0) {
+    } else if (type === 'custom_search_select' && data && data?.length > 0) {
       const filteredData =
-        value && value !== "*"
+        value && value !== '*'
           ? data.filter((item) =>
               checkIncludes(
                 item.name,
@@ -249,6 +254,9 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
         const fetchedSuggestions = await getData?.(value);
         setSuggestions(fetchedSuggestions);
         setIsLoading(false);
+        if (autoDropdown) {
+          setRefetchData(true);
+        }
       } catch (error) {
         setIsLoading(false);
       }
@@ -258,10 +266,10 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   const onLabelClick = () => {
     if (!isDisabled) {
       inputRef?.current?.focus();
-      if (autoFilter && inputValue === "") {
-        handleValChange("*");
+      if (autoFilter && inputValue === '') {
+        handleValChange('*');
       } else if (
-        (type === "custom_select" || type === "custom_search_select") &&
+        (type === 'custom_select' || type === 'custom_search_select') &&
         data &&
         data?.length > 0
       ) {
@@ -283,17 +291,22 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     else return (inputValue?.toString().length ?? 0) <= 0 ? true : false;
   };
   const loadStaticData = async () => {
-    if (!data) {
+    if (!data || (refetchData && autoDropdown && !isStaticList)) {
       data = [];
       if (getData) {
         try {
           setIsLoading(true);
-          handlePickSuggestions("*");
-          const fetchedSuggestions = await getData?.("*");
+          //handlePickSuggestions('*');
+          const fetchedSuggestions = await getData?.('*');
           fetchedSuggestions?.forEach((element: any) => {
             data?.push(element);
           });
+          setSuggestions(fetchedSuggestions);
           setIsLoading(false);
+          if (autoDropdown) {
+            setRefetchData(false);
+            timerRef.current = 1;
+          }
         } catch (error) {
           setIsLoading(false);
         }
@@ -301,9 +314,9 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     }
   };
   useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     };
   }, []);
 
@@ -314,10 +327,10 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   }, [autoFocus]);
   const onInputFocus = () => {
     if (!isDisabled) {
-      if (autoFilter && inputValue === "") {
-        handleValChange("*");
+      if (autoFilter && inputValue === '') {
+        handleValChange('*');
       } else if (
-        (type === "custom_select" || type === "custom_search_select") &&
+        (type === 'custom_select' || type === 'custom_search_select') &&
         data &&
         data?.length > 0
       ) {
@@ -336,18 +349,29 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
       name: suggestion.name,
       ...(suggestion?.label ? { label: suggestion?.label } : {}),
     });
-    if (type !== "custom_select") setInputValue(suggestion.name);
+    if (type !== 'custom_select') setInputValue(suggestion.name);
     setDropOpen(false);
     setSelectedIndex(index);
   };
   const handleOpen = (e: any) => {
-    if (!suggestions || suggestions?.length === 0) {
-      handleDropData();
-      return;
+    if (!suggestions || suggestions?.length === 0) handleDropData();
+    if (!isLoading) {
+      setDropOpen(!dropOpen);
+      if (type !== 'custom_select') setInputValue('');
+    }
+  };
+
+  const handleOpenDropdown = (e: any) => {
+    if (!suggestions || suggestions?.length === 0 || refetchData) {
+      if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
+        setSuggestions([]);
+        loadStaticData();
+      } else if (!refetchData) {
+        handleDropData();
+      }
     }
     if (!isLoading) {
       setDropOpen(!dropOpen);
-      if (type !== "custom_select") setInputValue("");
     }
   };
 
@@ -358,28 +382,28 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     if (!insideOpen) {
       setSelectedIndex(0);
-      window.addEventListener("scroll", handleScroll);
+      window.addEventListener('scroll', handleScroll);
 
-      const mainElement = document.querySelector("main");
-      mainElement?.addEventListener("scroll", handleScroll);
+      const mainElement = document.querySelector('main');
+      mainElement?.addEventListener('scroll', handleScroll);
 
       const gridElements = document.querySelectorAll(
-        ".k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto"
+        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto'
       );
       gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener("scroll", handleScroll);
+        gridElement.addEventListener('scroll', handleScroll);
       });
 
-      window.addEventListener("resize", getDropPosition);
+      window.addEventListener('resize', getDropPosition);
       getDropPosition();
       return () => {
-        window.removeEventListener("scroll", handleScroll);
-        const mainElement = document.querySelector("main");
-        mainElement?.removeEventListener("scroll", handleScroll);
-        window.addEventListener("resize", getDropPosition);
-        const gridElements = document.querySelectorAll(".k-grid-content");
+        window.removeEventListener('scroll', handleScroll);
+        const mainElement = document.querySelector('main');
+        mainElement?.removeEventListener('scroll', handleScroll);
+        window.addEventListener('resize', getDropPosition);
+        const gridElements = document.querySelectorAll('.k-grid-content');
         gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener("scroll", handleScroll);
+          gridElement.removeEventListener('scroll', handleScroll);
         });
       };
     }
@@ -387,13 +411,16 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
 
   const handleClear = () => {
     setDropOpen(false);
-    setInputValue("");
-    onChange({ id: undefined, name: "", from: 3 });
+    setInputValue('');
+    onChange({ id: undefined, name: '', from: 3 });
     onLabelClick();
+    if (autoDropdown) {
+      setRefetchData(true);
+    }
   };
 
   useEffect(() => {
-    setInputValue(value?.name ?? "");
+    setInputValue(value?.name ?? '');
   }, [value?.name]);
 
   useEffect(() => {
@@ -401,7 +428,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   }, [data]);
 
   const getErrors = (err: any) => {
-    let errMsg = "";
+    let errMsg = '';
     if (err.message) {
       errMsg = err?.message;
     } else if (err?.id?.message) {
@@ -412,61 +439,61 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     return errMsg;
   };
   const generateClassName = (
-    type: "input" | "label" | "message" | "adorement"
+    type: 'input' | 'label' | 'message' | 'adorement'
   ): string => {
     let className = propsClassName;
     switch (type) {
-      case "input":
+      case 'input':
         className += ` block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${
           label && isModern
-            ? "placeholder-transparent"
-            : "focus:placeholder-grey-secondary placeholder-input-label"
+            ? 'placeholder-transparent'
+            : 'focus:placeholder-grey-secondary placeholder-input-label'
         } focus:placeholder-grey-secondary`;
 
         if (errors && errors[name]) {
           className +=
-            " border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline";
+            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
         } else {
           className +=
-            " text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0";
+            ' text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0';
         }
 
-        className += getHeight();
+        className += getHeight()
 
         break;
-      case "label":
+      case 'label':
         className += ` flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size 
           ${
             isDisabled
-              ? "cursor-pointer"
-              : "cursor-text peer-focus:cursor-pointer"
+              ? 'cursor-pointer'
+              : 'cursor-text peer-focus:cursor-pointer'
           } ${
           isDisabled && !checkIsEmptyField()
-            ? "disabled-input-label-bg"
+            ? 'disabled-input-label-bg'
             : !isDisabled || !checkIsEmptyField()
-            ? "active-input-label-bg"
-            : ""
+            ? 'active-input-label-bg'
+            : ''
         } absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
           isDisabled
-            ? "cursor-pointer"
-            : "cursor-text peer-focus:cursor-pointer"
+            ? 'cursor-pointer'
+            : 'cursor-text peer-focus:cursor-pointer'
         }
            ${
              checkIsEmptyField()
-               ? "modern-input-label-size"
-               : "modern-input-peer-focus-label-size"
+               ? 'modern-input-label-size'
+               : 'modern-input-peer-focus-label-size'
            }`;
         if (errors && errors[name]) {
-          className += " text-error-light ";
+          className += ' text-error-light ';
         } else {
-          className += " text-grey-dark peer-focus:text-blue-navy";
+          className += ' text-grey-dark peer-focus:text-blue-navy';
         }
         break;
-      case "message":
-        className = " text-error-icon ";
+      case 'message':
+        className = ' text-error-icon ';
         break;
-      case "adorement":
-        className += "  absolute right-0 adorement gap-1 flex items-center ";
+      case 'adorement':
+        className += '  absolute right-0 adorement gap-1 flex items-center ';
         break;
       default:
         break;
@@ -491,36 +518,37 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const filteredData =
-    inputValue !== "*" &&
-    inputValue !== "" &&
-    type !== "custom_select" &&
+    inputValue !== '*' &&
+    inputValue !== '' &&
+    type !== 'custom_select' &&
     !noLocalFilter
       ? suggestions?.filter((item: valueProps) =>
           checkIncludes(
             item.name,
             inputValue,
-            item.param1 ?? "",
-            item.param2 ?? "",
-            item.param3 ?? "",
-            item.param4 ?? ""
+            item.param1 ?? '',
+            item.param2 ?? '',
+            item.param3 ?? '',
+            item.param4 ?? ''
           )
         )
       : suggestions;
 
   const handleError = (data: any) => {
     if (
-      getErrors(data[name]) === "required" ||
-      getErrors(data[name]) === "Required"
+      getErrors(data[name]) === 'required' ||
+      getErrors(data[name]) === 'Required'
     ) {
       return `${label ?? labelTitle} is ${getErrors(data[name])}`;
     } else {
-      return getErrors(data[name]) ?? "";
+      return getErrors(data[name]) ?? '';
     }
   };
 
   const getDropPosition = (): any => {
     if (!insideOpen && inputRef?.current) {
       const dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
+      const isMobile = window.innerWidth < 768; // Mobile breakpoint
 
       const inputRect = inputRef.current.getBoundingClientRect();
       const spaceBelow =
@@ -534,11 +562,65 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
       } else {
         top = inputRect.top + window.scrollY + inputRect.height + 2;
       }
+
+      let left = inputRect.left + window.scrollX;
+      let width = inputRect.width + dropdownMinWidth;
+      const viewportWidth = window.innerWidth;
+      const viewportRight = window.scrollX + viewportWidth;
+      const inputRight = inputRect.right + window.scrollX;
+
+      // Check if dropdown would overflow on the right side
+      const dropdownRight = left + width;
+      const wouldOverflowRight = dropdownRight > viewportRight;
+
+      // If dropdown would overflow on the right (last column scenario), align from right to left
+      if (wouldOverflowRight) {
+        // Align right edge of dropdown with right edge of input
+        // Dropdown extends to the left from the input's right edge
+        const padding = isMobile ? 8 : 0;
+        left = inputRight - width;
+        
+        // Ensure dropdown doesn't go off the left edge
+        const viewportLeft = window.scrollX + (isMobile ? 8 : 0);
+        if (left < viewportLeft) {
+          left = viewportLeft;
+          // Adjust width to fit within viewport
+          width = Math.min(width, inputRight - left - padding);
+        }
+      }
+
+      // Handle mobile view - additional constraints
+      if (isMobile) {
+        // On mobile, constrain width to viewport with some padding
+        const mobilePadding = 16; // 8px padding on each side
+        const maxWidth = viewportWidth - mobilePadding;
+        
+        // Use the smaller of: calculated width or max mobile width
+        width = Math.min(width, maxWidth);
+        
+        // Adjust left position to prevent overflow
+        const rightEdge = left + width;
+        const mobileViewportRight = window.scrollX + viewportWidth - mobilePadding / 2;
+        
+        if (rightEdge > mobileViewportRight) {
+          // Align to right edge with padding
+          left = mobileViewportRight - width;
+        }
+        
+        // Ensure dropdown doesn't go off the left edge
+        const viewportLeft = window.scrollX + mobilePadding / 2;
+        if (left < viewportLeft) {
+          left = viewportLeft;
+          // Adjust width if needed to fit
+          width = Math.min(width, mobileViewportRight - left);
+        }
+      }
+
       setDropPosition({
-        left: inputRect.left + window.scrollX,
+        left,
         top,
         bottom,
-        width: inputRect.width + dropdownMinWidth,
+        width,
       });
     }
 
@@ -549,7 +631,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
 
   useEffect(() => {
     if (
-      inputValue &&
+      (inputValue || autoDropdown) &&
       filteredData?.length === 0 &&
       !isLoading &&
       timerRef.current === 1
@@ -565,34 +647,34 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     // Handle keyboard navigation
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!dropOpen) return;
-
+    
       const nextIndex =
-        e.key === "ArrowDown"
+        e.key === 'ArrowDown'
           ? (selectedIndex + 1) % filteredData.length
-          : e.key === "ArrowUp"
+          : e.key === 'ArrowUp'
           ? (selectedIndex - 1 + filteredData.length) % filteredData.length
           : selectedIndex;
-
+    
       switch (e.key) {
-        case "ArrowDown":
-        case "ArrowUp":
+        case 'ArrowDown':
+        case 'ArrowUp':
           e.preventDefault();
-
+    
           // Update index first
           setSelectedIndex(nextIndex);
-
+    
           // Wait for DOM update before scrolling
           requestAnimationFrame(() => {
             const el = itemRefs.current[nextIndex];
             const container = scrollContainerRef.current;
-
+    
             if (el && container) {
               const elTop = el.offsetTop;
               const elBottom = elTop + el.offsetHeight;
-
+    
               const containerTop = container.scrollTop;
               const containerBottom = containerTop + container.clientHeight;
-
+    
               if (elBottom > containerBottom) {
                 container.scrollTop = elBottom - container.clientHeight;
               } else if (elTop < containerTop) {
@@ -601,26 +683,26 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
             }
           });
           break;
-
-        case "Enter":
+    
+        case 'Enter':
           e.preventDefault();
           handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
           break;
-
-        case "Escape":
+    
+        case 'Escape':
           e.preventDefault();
           setDropOpen(false);
           break;
-
+    
         default:
           break;
       }
-    };
+    };    
 
     if (filteredData?.length > 0 && !isLoading) {
-      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener('keydown', handleKeyDown);
       return () => {
-        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener('keydown', handleKeyDown);
       };
     }
   }, [
@@ -636,8 +718,8 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     return (
       (filteredData?.length > 0 || showNoResults) && (
         <div
-          className="autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
           style={dropPosition}
+          className="autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
         >
           <ul
             className={`h-auto max-h-40 overflow-auto w-full ${tableView ? '' : 'py-1.5'}`}
@@ -649,9 +731,9 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
                   <li
                     className={`${
                       value?.id === suggestion?.id
-                        ? "bg-blue-navy text-white"
+                        ? 'bg-blue-navy text-white'
                         : `${
-                            index === selectedIndex ? "is-selected" : ""
+                            index === selectedIndex ? 'is-selected' : ''
                           } hover:bg-table-hover`
                     } cursor-pointer text-xxs qbs-autocomplete-suggections-items ${
                       tableView 
@@ -681,14 +763,13 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
                         
                         // Determine if first column needs a separator
                         const hasColumnsAfter = columnsAfter.length > 0;
-                        const hasColumnsBefore = columnsBefore.length > 0;
                         
                         return (
                           <>
                             {/* Columns before first column */}
                             {columnsBefore.map((column, colIndex) => {
                               const hasValue = suggestion?.[column.key];
-                              const isLastBefore = colIndex === columnsBefore.length - 1 && !hasColumnsAfter;
+                              const isLastBefore = false;
                               return hasValue ? (
                                 <li
                                   key={column.key}
@@ -771,7 +852,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     const shouldShowClose =
       value?.name &&
-      (value?.id || String(value?.id) === "0") &&
+      (value?.id || String(value?.id) === '0') &&
       !disabled &&
       !readOnly &&
       isClose;
@@ -785,7 +866,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
       if (inputRef.current) {
         const { scrollWidth, clientWidth, value } = inputRef.current;
         // Check for overflow only when there's content
-        if (value.trim() !== "") {
+        if (value.trim() !== '') {
           setShowTooltip(scrollWidth > clientWidth + 2);
         } else {
           setShowTooltip(false); // No tooltip for empty input
@@ -794,13 +875,13 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
     };
 
     if (inputRef.current) {
-      inputRef.current.addEventListener("input", checkOverflow);
+      inputRef.current.addEventListener('input', checkOverflow);
       checkOverflow(); // Initial check
     }
 
     return () => {
       if (inputRef.current) {
-        inputRef.current.removeEventListener("input", checkOverflow);
+        inputRef.current.removeEventListener('input', checkOverflow);
       }
     };
   }, [inputValue]);
@@ -818,7 +899,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
       id={
         id ? `autocomplete-container-${id}` : `autocomplete-container-${name}`
       }
-      className={` flex-grow  ${fullWidth ? "w-full" : "w-auto"}`}
+      className={` flex-grow  ${fullWidth ? 'w-full' : 'w-auto'}`}
       ref={dropdownref}
     >
       {label && !isModern && (
@@ -838,7 +919,7 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
         )}
 
         <div
-          className={`flex relative ${fullWidth ? "w-full" : "w-auto"}`}
+          className={`flex relative ${fullWidth ? 'w-full' : 'w-auto'}`}
           style={{ width: width }}
         >
           <div
@@ -848,8 +929,8 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
           >
             <input
               type="text"
-              readOnly={readOnly ?? type === "custom_select"}
-              value={inputValue ? inputValue : ""}
+              readOnly={readOnly ?? type === 'custom_select'}
+              value={inputValue ? inputValue : ''}
               onBlur={handleClearInputValue}
               autoComplete="off"
               disabled={disabled}
@@ -872,22 +953,23 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
                     }
                   : {}),
               }}
-              className={` ${generateClassName("input")}`}
+              className={` ${generateClassName('input')}`}
               onChange={handleChange}
               placeholder={
-                type === "auto_complete"
+                type === 'auto_complete'
                   ? placeholder && isCustomPlaceholder
                     ? placeholder
-                    : "Type to search"
-                  : placeholder ?? "--Select--"
+                    : 'Type to search'
+                  : placeholder ?? '--Select--'
               }
               onFocus={onInputFocus}
               onClick={(e) => {
-                if (type === "custom_select") {
+                if (type === 'custom_select') {
                   setDropOpen(!dropOpen);
                   handleOpen(e);
                 } else {
-                  setDropOpen(!dropOpen);
+                  if (dropOpen || filteredData?.length > 0)
+                    setDropOpen(!dropOpen);
                 }
               }}
             />
@@ -895,20 +977,20 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
               <label
                 htmlFor={id}
                 onClick={() => onLabelClick()}
-                className={generateClassName("label")}
+                className={generateClassName('label')}
               >
-                {label ? <span className="truncate">{label}</span> : ""}
+                {label ? <span className="truncate">{label}</span> : ''}
                 {required ? <span className="text-error"> *</span> : <></>}
               </label>
             )}
           </div>
-          <div className="flex items-center justify-center   ">
+          <div className="flex items-center justify-center autocomplete-adorement-wrapper">
             <div
               ref={adorementRef}
               className={`${generateClassName(
-                "adorement"
-              )} qbs-autocomplete-adorement custom-dorpdown-adorement  mr-[1px] ${
-                isLoading ? "bg-white" : ""
+                'adorement'
+              )} qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ${
+                isLoading ? 'bg-white' : ''
               }`}
             >
               {showClose && (
@@ -923,31 +1005,47 @@ const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps> = ({
                 </button>
               )}
               {isLoading && <Spinner />}
-              {type !== "auto_complete" && !disabled && !readOnly && (
-                <button
-                  disabled={disabled ?? readOnly}
-                  onClick={(e) => handleOpen(e)}
-                  onBlur={handleClose}
-                  className=" text-[#667085] focus-visible:outline-slate-100"
-                  data-testid="drop-arrow"
-                  type="button"
-                  id="autocomplete-drop-icon"
-                  ref={dropBtnRef}
-                >
-                  {!dropOpen ? (
-                    <DropArrow uniqueDropArrowId="drop-arrow-icon" />
-                  ) : (
-                    <DropArrow
-                      className="rotate-180"
-                      uniqueDropArrowId="drop-arrow-icon"
-                    />
-                  )}
-                </button>
-              )}
+              {(type !== 'auto_complete' || autoDropdown) &&
+                !disabled &&
+                !readOnly && (
+                  <button
+                    disabled={disabled ?? readOnly}
+                    onClick={(e) => handleOpenDropdown(e)}
+                    onBlur={handleClose}
+                    className=" text-[#667085] focus-visible:outline-slate-100"
+                    data-testid="drop-arrow"
+                    type="button"
+                    id="autocomplete-drop-icon"
+                    ref={dropBtnRef}
+                  >
+                    {!dropOpen ? (
+                      autoDropdown ? (
+                        <AllDropArrow
+                          type="down"
+                          uniqueId="all-dropdow-arrow-icon"
+                          className="all-dropdow-arrow-icon"
+                        />
+                      ) : (
+                        <DropArrow uniqueDropArrowId="drop-arrow-icon" />
+                      )
+                    ) : autoDropdown ? (
+                      <AllDropArrow
+                        type="up"
+                        uniqueId="all-dropdow-arrow-icon"
+                        className="all-dropdow-arrow-icon"
+                      />
+                    ) : (
+                      <DropArrow
+                        className="rotate-180"
+                        uniqueDropArrowId="drop-arrow-icon"
+                      />
+                    )}
+                  </button>
+                )}
               {errors && errors[name] && (
                 <div
-                  className={` text-error-label relative cursor-pointer ${generateClassName(
-                    "message"
+                  className={` text-error-label  relative cursor-pointer ${generateClassName(
+                    'message'
                   )}`}
                   onMouseEnter={() => setIsHovered(true)}
                   onMouseLeave={() => setIsHovered(false)}