react-core-ts 1.2.22 → 1.2.23

package/src/AutoCompleteWithSelectedList.tsx

@@ -92,138 +92,54 @@ const AutoCompleteWithSelectedList = forwardRef<
     const dropRef = useRef(null);
     const inputSearchRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
-    const [dropdownStyle, setDropdownStyle] = useState({
-      top: 0,
+    const [dropdownStyle, setDropdownStyle] = useState<any>({
+      top: undefined,
       left: 0,
       width: 200,
     });
 
     const adjustDropdownPosition = () => {
-      if (selectedItems?.length > 0 && !viewMode) {
-        if (dropdownRef.current && dropdownSelectedRef.current) {
-          const inputRect = dropdownRef.current.getBoundingClientRect();
-          const dropdownPosition = {
-            left: inputRect.left + window.scrollX,
-            width: inputRect.width,
-            top: 0,
-          };
-          // Check if there's enough space below the input for the dropdown
-          const spaceBelow = window.innerHeight - inputRect.bottom;
-          const spaceAbove = inputRect.top + window.scrollY;
-
-          let dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
-
-          if (countOnly && !viewMode) {
-            if (dropdownSelectedRef?.current)
-              dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
-          }
-
-          if (tab.length > 0) {
-            if (tabRef?.current)
-              dropdownHeight += tabRef?.current?.clientHeight;
-          }
-          if (spaceBelow >= dropdownHeight) {
-            dropdownPosition.top =
-              inputRect.top + window.scrollY + inputRect.height;
-          } else {
-            dropdownPosition.top = viewMode
-              ? inputRect.top + window.scrollY - dropdownHeight + 18 + topMargin
-              : inputRect.top +
-                window.scrollY -
-                dropdownHeight +
-                73 +
-                topMargin;
-          }
-          setDropdownStyle({
-            ...dropdownPosition,
-          });
+      if (dropdownRef.current) {
+        const inputRect = dropdownRef.current.getBoundingClientRect();
+        const dropdownPosition = {
+          left: inputRect.left + window.scrollX,
+          width: inputRect.width,
+          top: 0,
+        };
+        // Check if there's enough space below the input for the dropdown
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top + window.scrollY;
+        let dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
+
+        if (countOnly && !viewMode) {
+          if (dropdownSelectedRef?.current)
+            console.log(dropdownSelectedRef?.current?.clientHeight, 'sdasdasd');
+          dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
         }
-      } else {
-        if (dropdownRef.current) {
-          const inputRect = dropdownRef.current.getBoundingClientRect();
-          const dropdownPosition = {
-            left: inputRect.left + window.scrollX,
-            width: inputRect.width,
-            top: 0,
-          };
-          // Check if there's enough space below the input for the dropdown
-          const spaceBelow = window.innerHeight - inputRect.bottom;
-          const spaceAbove = inputRect.top + window.scrollY;
-
-          let dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
-
-          if (countOnly && !viewMode) {
-            if (dropdownSelectedRef?.current)
-              dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
-          }
 
-          if (tab.length > 0) {
-            if (tabRef?.current)
-              dropdownHeight += tabRef?.current?.clientHeight;
-          }
-          console.log(dropdownHeight);
-          if (spaceBelow >= dropdownHeight) {
-            dropdownPosition.top =
-              inputRect.top + window.scrollY + inputRect.height;
-          } else {
-            dropdownPosition.top = viewMode
-              ? inputRect.top + window.scrollY - dropdownHeight + 18 + topMargin
-              : inputRect.top +
-                window.scrollY -
-                dropdownHeight +
-                73 +
-                topMargin;
-          }
-          console.log(dropdownPosition);
+        if (tab.length > 0) {
+          if (tabRef?.current) dropdownHeight += tabRef?.current?.clientHeight;
+        }
+        console.log(dropdownHeight);
+        if (spaceBelow >= dropdownHeight) {
+          dropdownPosition.top =
+            inputRect.top + window.scrollY + inputRect.height;
+        } else {
+          dropdownPosition.top = viewMode
+            ? inputRect.top + window.scrollY - dropdownHeight + 18 + topMargin
+            : inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
+        }
+        setTimeout(() => {
           setDropdownStyle({
             ...dropdownPosition,
           });
-        }
+        }, 400);
       }
     };
-    // const adjustDropdownPosition = () => {
-    //   if (!dropdownRef.current) return;
-
-    //   const inputRect = dropdownRef.current.getBoundingClientRect();
-    //   const dropdownPosition = {
-    //     left: inputRect.left + window.scrollX,
-    //     width: inputRect.width,
-    //     top: 0,
-    //   };
-
-    //   const spaceBelow = window.innerHeight - inputRect.bottom;
-    //   let dropdownHeight = viewMode ? 160 : 300; // Default dropdown height
-
-    //   // Helper to calculate additional height from other elements
-    //   const calculateAdditionalHeight = () => {
-    //     let extraHeight = 0;
-    //     if (countOnly && !viewMode && dropdownSelectedRef?.current) {
-    //       extraHeight += dropdownSelectedRef.current.clientHeight;
-    //     }
-    //     if (tab.length > 0 && tabRef?.current) {
-    //       extraHeight += tabRef.current.clientHeight;
-    //     }
-    //     return extraHeight;
-    //   };
-
-    //   dropdownHeight += calculateAdditionalHeight();
-
-    //   // Determine top position based on available space
-    //   if (spaceBelow >= dropdownHeight) {
-    //     dropdownPosition.top =
-    //       inputRect.top + window.scrollY + inputRect.height;
-    //   } else {
-    //     const adjustment = viewMode ? 18 + topMargin : 73 + topMargin;
-    //     dropdownPosition.top =
-    //       inputRect.top + window.scrollY - dropdownHeight + adjustment;
-    //   }
-
-    //   setDropdownStyle(dropdownPosition);
-    // };
 
     useEffect(() => {
       window.addEventListener('resize', adjustDropdownPosition);
-      adjustDropdownPosition();
+      if (dropOpen) adjustDropdownPosition();
 
       return () => {
         window.removeEventListener('resize', adjustDropdownPosition);
@@ -372,9 +288,8 @@ const AutoCompleteWithSelectedList = forwardRef<
         if (
           dropRef.current &&
           event.target instanceof Node &&
-          !dropRef.current.contains(event.target)
-          // &&
-          // event.target.nodeName !== "svg"
+          !dropRef.current.contains(event.target) &&
+          event.target.nodeName !== 'svg'
         ) {
           setTimeout(() => {
             setDropOpen(false);
@@ -386,7 +301,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       window.addEventListener('scroll', handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
-        'div[style*="overflow"], .overflow-auto'
+        'div[style*="overflow"], .overflow-auto, div[style*="overflow-y"], .overflow-y-auto'
       );
       scrollableDivs.forEach((div) =>
         div.addEventListener('scroll', handleClickOutside as any)
@@ -487,6 +402,7 @@ const AutoCompleteWithSelectedList = forwardRef<
       if (viewMode) {
         adjustDropdownPosition();
       }
+      console.log('handleDropOpen');
       setTimeout(() => {
         if (!dropOpen) setDropOpen(true);
       }, 100);
@@ -494,6 +410,7 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     const handleDropClose = (e: any) => {
       e.stopPropagation();
+      console.log('handleDropClose');
       if (dropOpen) setDropOpen(false);
     };
 
@@ -572,11 +489,11 @@ const AutoCompleteWithSelectedList = forwardRef<
       );
     };
     useEffect(() => {
-      if (dropOpen && !viewMode && selectedItems?.length > 0) {
+      if (dropOpen && !viewMode) {
         adjustDropdownPosition();
       }
     }, [dropOpen]);
-
+    console.log(dropdownStyle, 'dropdownStyle');
     const getTabItems = () => {
       return (
         <ul