react-core-ts 1.2.20 → 1.2.22

package/src/AutoCompleteWithSelectedList.tsx

@@ -74,7 +74,6 @@ const AutoCompleteWithSelectedList = forwardRef<
     const tabRef = useRef<HTMLUListElement>(null);
     // State Hooks Section
     const [isInitialRender, setIsInitialRender] = useState(true);
-    const [isReadyToRender, setIsReadyToRender] = React.useState(false);
 
     const [inputValue, setInputValue] = useState<string>(value);
     const [searchValue, setSearchValue] = useState<string>('');
@@ -100,40 +99,127 @@ const AutoCompleteWithSelectedList = forwardRef<
     });
 
     const adjustDropdownPosition = () => {
-      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 (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 (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 (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;
+      } 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);
+          setDropdownStyle({
+            ...dropdownPosition,
+          });
         }
-        setDropdownStyle({
-          ...dropdownPosition,
-        });
       }
     };
+    // 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);
@@ -396,10 +482,9 @@ const AutoCompleteWithSelectedList = forwardRef<
         : '';
 
     const handleDropOpen = async (e: any) => {
-      setIsReadyToRender(false);
       e.stopPropagation();
+
       if (viewMode) {
-        setIsReadyToRender(true);
         adjustDropdownPosition();
       }
       setTimeout(() => {
@@ -409,7 +494,6 @@ const AutoCompleteWithSelectedList = forwardRef<
 
     const handleDropClose = (e: any) => {
       e.stopPropagation();
-      setIsReadyToRender(false);
       if (dropOpen) setDropOpen(false);
     };
 
@@ -488,13 +572,8 @@ const AutoCompleteWithSelectedList = forwardRef<
       );
     };
     useEffect(() => {
-      if (!viewMode) {
-        if (dropOpen) {
-          adjustDropdownPosition();
-          setIsReadyToRender(true);
-        } else {
-          setIsReadyToRender(false);
-        }
+      if (dropOpen && !viewMode && selectedItems?.length > 0) {
+        adjustDropdownPosition();
       }
     }, [dropOpen]);
 
@@ -628,7 +707,6 @@ const AutoCompleteWithSelectedList = forwardRef<
           {/* Suggestions Dropdown */}
 
           {dropOpen &&
-            isReadyToRender &&
             ReactDOM.createPortal(
               <div
                 ref={dropRef}
@@ -713,50 +791,46 @@ const AutoCompleteWithSelectedList = forwardRef<
                     )}
                 </div>
                 <>
-                  <div>
-                    {countOnly && selectedItems?.length > 0 && (
-                      <>
-                        <div
-                          className={`qbs-expandable-container qbs-dropdown-selected-container`}
-                          ref={dropdownSelectedRef}
-                        >
-                          <div className={`qbs-flex qbs-w-full qbs-text-xs`}>
-                            <div className="qbs-selected-lbs qbs-flex-grow">
-                              Selected Items
-                            </div>
-                            <div
-                              className={`qbs-clear-link qbs-text-right qbs-cursor-pointer ${
-                                viewMode ? 'hidden' : ''
-                              }`}
-                              onClick={handleClearSelected}
-                            >
-                              Clear all
-                            </div>
+                  {countOnly && selectedItems?.length > 0 && (
+                    <>
+                      <div
+                        className={`qbs-expandable-container qbs-dropdown-selected-container`}
+                        ref={dropdownSelectedRef}
+                      >
+                        <div className={`qbs-flex qbs-w-full qbs-text-xs`}>
+                          <div className="qbs-selected-lbs qbs-flex-grow">
+                            Selected Items
+                          </div>
+                          <div
+                            className={`qbs-clear-link qbs-text-right qbs-cursor-pointer ${
+                              viewMode ? 'hidden' : ''
+                            }`}
+                            onClick={handleClearSelected}
+                          >
+                            Clear all
                           </div>
+                        </div>
 
-                          {getSelectedItems(true)}
-
-                          <>
-                            {selectedItems?.length > itemCount &&
-                              showAllSelected && (
-                                <div className="qbs-readmore-collapse">
-                                  <div
-                                    className="qbs-more-collapse"
-                                    onClick={() => {
-                                      handleCollapseArrowClick();
-                                    }}
-                                  >
-                                    <DropArrow
-                                      className={`icon-button-rotate`}
-                                    />
-                                  </div>
+                        {getSelectedItems(true)}
+
+                        <>
+                          {selectedItems?.length > itemCount &&
+                            showAllSelected && (
+                              <div className="qbs-readmore-collapse">
+                                <div
+                                  className="qbs-more-collapse"
+                                  onClick={() => {
+                                    handleCollapseArrowClick();
+                                  }}
+                                >
+                                  <DropArrow className={`icon-button-rotate`} />
                                 </div>
-                              )}
-                          </>
-                        </div>
-                      </>
-                    )}
-                  </div>
+                              </div>
+                            )}
+                        </>
+                      </div>
+                    </>
+                  )}
                 </>
               </div>,
               document.body