fix: AutoComplete click event on open icon

src/components/AutoComplete/AutoComplete.tsx

@@ -196,11 +196,11 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
       if (window.visualViewport) {
         window.visualViewport.addEventListener(
           "resize",
-          handleVisualViewportResize
+          handleVisualViewportResize,
         );
         window.visualViewport.addEventListener(
           "scroll",
-          handleVisualViewportScroll
+          handleVisualViewportScroll,
         );
       }
       const inputElement = inputRef.current;
@@ -222,11 +222,11 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         if (window.visualViewport) {
           window.visualViewport.removeEventListener(
             "resize",
-            handleVisualViewportResize
+            handleVisualViewportResize,
           );
           window.visualViewport.removeEventListener(
             "scroll",
-            handleVisualViewportScroll
+            handleVisualViewportScroll,
           );
         }
         const inputElement = inputRef.current;
@@ -247,7 +247,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         target.closest(".select-group") && !clickedInsideCurrent;
 
       const clickedOnPortalDropdown = target.closest(
-        `[data-autocomplete-portal="${uniqueId}"]`
+        `[data-autocomplete-portal="${uniqueId}"]`,
       );
 
       if (clickedOnAnotherAutocomplete) {
@@ -318,7 +318,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
     const preventTouchMove = (e: TouchEvent) => {
       const target = e.target as HTMLElement;
       const dropdown = document.querySelector(
-        `[data-autocomplete-portal="${uniqueId}"]`
+        `[data-autocomplete-portal="${uniqueId}"]`,
       );
 
       if (dropdown) {
@@ -326,7 +326,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         if (touch) {
           const elementAtPoint = document.elementFromPoint(
             touch.clientX,
-            touch.clientY
+            touch.clientY,
           );
           if (
             elementAtPoint &&
@@ -375,12 +375,12 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
       setLocalInputValue(value);
       setIsTyping(true);
       const filtered = data.filter((item) =>
-        item.value.toLowerCase().includes(value.toLowerCase())
+        item.value.toLowerCase().includes(value.toLowerCase()),
       );
       setFilteredData(filtered);
       setShowOptions(true);
     },
-    [data]
+    [data],
   );
 
   const handleChange = useCallback(
@@ -390,7 +390,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
 
       if (onChangeValue && newSelectedKeys.length > 0) {
         const selectedItem = data.find(
-          (item) => item.key === newSelectedKeys[0]
+          (item) => item.key === newSelectedKeys[0],
         );
         if (selectedItem) {
           onChangeValue({
@@ -400,7 +400,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         }
       }
     },
-    [onChange, onChangeValue, data]
+    [onChange, onChangeValue, data],
   );
 
   const handleOptionClick = useCallback(
@@ -430,7 +430,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         setShowOptions(false);
       }
     },
-    [multiselect, handleChange]
+    [multiselect, handleChange],
   );
 
   const handleInputClick = useCallback(() => {
@@ -507,8 +507,8 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
             item.originalGroupKey !== undefined
               ? item.originalGroupKey
               : String(item.key).startsWith("__group__")
-              ? String(item.key).slice(11)
-              : item.key;
+                ? String(item.key).slice(11)
+                : item.key;
           onGroupHeaderClick(groupKey);
         } else if (!item.disabled) {
           handleOptionClick(item.key);
@@ -523,8 +523,8 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
               isGroupHeader && onGroupHeaderClick
                 ? "cursor-pointer opacity-55 hover:bg-gray-100 text-dark-800 dark:text-dark-100 dark:hover:bg-primary-900/90 font-semibold bg-gray-200 dark:bg-primary-900"
                 : item.disabled
-                ? "text-gray-400 dark:text-dark-500 cursor-not-allowed"
-                : "cursor-pointer hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700"
+                  ? "text-gray-400 dark:text-dark-500 cursor-not-allowed"
+                  : "cursor-pointer hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700"
             }
             ${
               isSelected && !isGroupHeader
@@ -602,7 +602,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
       >
         {dropdownOptions}
       </motion.ul>,
-      document.body
+      document.body,
     );
   }, [
     showOptions,
@@ -638,6 +638,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
             placeholder={title || "انتخاب کنید..."}
           />
           <ChevronDownIcon
+            onClick={handleInputClick}
             className={`absolute left-3 text-dark-400 dark:text-dark-100 transition-transform duration-200  ${
               showOptions ? "transform rotate-180" : ""
             } ${getSizeStyles(size).icon}`}