x-ui-design 0.2.97 → 0.2.98

package/dist/index.esm.js

@@ -3025,27 +3025,64 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [handleClearInputValue, open, hasMode]);
-  useEffect(() => {
-    if (!selectRef.current || !getPopupContainer) {
-      return;
-    }
+  const updateDropdownPosition = useCallback(() => {
+    if (!selectRef.current) return;
     const selectBox = selectRef.current.getBoundingClientRect();
     const dropdownHeight = listHeight;
     const windowHeight = window.innerHeight;
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
     let positionStyle = {
-      top: `${selectBox.bottom}px`
-      // left: `${selectBox.left}px`,
+      top: `${selectBox.bottom + window.scrollY}px`,
+      left: `${selectBox.left + window.scrollX}px`,
+      width: `${selectBox.width}px`,
+      position: 'absolute'
     };
     if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
       positionStyle = {
-        top: `${selectBox.top - dropdownHeight}px`
-        // left: `${selectBox.left}px`,
+        top: `${selectBox.top + window.scrollY - dropdownHeight}px`,
+        left: `${selectBox.left + window.scrollX}px`,
+        width: `${selectBox.width}px`,
+        position: 'absolute'
       };
     }
     setDropdownPosition(positionStyle);
-  }, [listHeight, getPopupContainer]);
+  }, [listHeight]);
+  useEffect(() => {
+    if (!isOpen) return;
+    updateDropdownPosition();
+    // const container = getPopupContainer?.(selectRef.current!);
+    const scrollableParents = getScrollParents(selectRef.current);
+    const handleScroll = () => {
+      updateDropdownPosition();
+    };
+    // Add scroll listeners to all scrollable parents
+    scrollableParents.forEach(el => {
+      el.addEventListener('scroll', handleScroll, {
+        passive: true
+      });
+    });
+    // Add resize listener
+    window.addEventListener('resize', updateDropdownPosition);
+    return () => {
+      scrollableParents.forEach(el => {
+        el.removeEventListener('scroll', handleScroll);
+      });
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen, getPopupContainer, updateDropdownPosition]);
+  // Helper function to get all scrollable parents
+  const getScrollParents = element => {
+    const parents = [];
+    let current = element.parentElement;
+    while (current) {
+      if (current.scrollHeight > current.clientHeight) {
+        parents.push(current);
+      }
+      current = current.parentElement;
+    }
+    return parents;
+  };
   const handleSearch = e => {
     setSearchQuery(e.target.value);
     onSearch?.(e.target.value);
@@ -3137,7 +3174,8 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon]);
   const popupContainer = useMemo(() => {
-    return selectRef.current ? getPopupContainer?.(selectRef.current) : selectRef.current;
+    if (typeof window === 'undefined') return null;
+    return selectRef.current ? getPopupContainer?.(selectRef.current) : document.body;
   }, [getPopupContainer]);
   const extractedOptions = children ? (Array.isArray(children) ? children : [children]).filter(e => e).map(child => child.props) : options;
   const filteredOptions = extractedOptions.filter(option => {