funda-ui 4.7.545 → 4.7.560

package/lib/cjs/Select/index.js

@@ -3995,6 +3995,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         setTimeout(function () {
           popwinPosInit();
           popwinFilterItems(val);
+
+          // Fix popup position after fetch loading completes
+          fixPopupPositionAfterFetch();
         }, 0);
         setFetchLoading(false);
       });
@@ -4594,13 +4597,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     if (listContentRef.current === null) return;
     var _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
     var _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
-    var emptyFieldsCheck = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).every(function (node) {
+    var _items = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'));
+    var itemsDoNotExist = _items.every(function (node) {
       if (!node.classList.contains('hide')) {
         return false;
       }
       return true;
     });
-    if (emptyFieldsCheck) {
+    if (itemsDoNotExist) {
       _noDataDiv.classList.remove('hide');
       if (_btnSelectAll !== null) _btnSelectAll.classList.add('hide');
     } else {
@@ -4618,6 +4622,25 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //
     if (selectInputRef.current) selectInputRef.current.value = '';
   }
+  function fixPopupPositionAfterFetch() {
+    if (listContentRef.current === null || !isOpen) return;
+
+    // Get the current position data
+    var currentPos = listContentRef.current.dataset.pos;
+    if (currentPos === 'top') {
+      // Recalculate position for upward popup to fix offset issues
+      var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));
+      if (_modalRef && rootRef.current && selectInputRef.current) {
+        var _getAbsolutePositionO3 = (0,getElementProperty.getAbsolutePositionOfStage)(rootRef.current),
+          x = _getAbsolutePositionO3.x;
+        var _getAbsolutePositionO4 = (0,getElementProperty.getAbsolutePositionOfStage)(selectInputRef.current),
+          y = _getAbsolutePositionO4.y;
+        _modalRef.style.left = x + 'px';
+        var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+        _modalRef.style.top = topPosition + 'px';
+      }
+    }
+  }
   function cancel() {
     // hide list
     setIsOpen(false);
@@ -5468,6 +5491,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }
   }
 
+  // Select all detection functions in the input box (for "Single selection")
+  function checkUserInputboxIsAllSelected(e) {
+    var input = e.target;
+    if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+      setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+    } else {
+      setUserInputboxIsAllSelected(false);
+    }
+  }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // Call a function when the component has been rendered completely
     //--------------
@@ -5619,15 +5651,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     };
   }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
-  // Select all detection functions in the input box (for "Single selection")
-  function checkUserInputboxIsAllSelected(e) {
-    var input = e.target;
-    if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
-      setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
-    } else {
-      setUserInputboxIsAllSelected(false);
-    }
-  }
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "custom-select__label"
   }, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
@@ -5828,6 +5851,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         setTimeout(function () {
           popwinPosInit();
           popwinFilterItems(controlTempValue);
+
+          // Fix popup position after fetch loading completes
+          fixPopupPositionAfterFetch();
         }, 0);
       });
     }
@@ -5953,6 +5979,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         setTimeout(function () {
           popwinPosInit();
           popwinFilterItems(controlTempValue);
+
+          // Fix popup position after fetch loading completes
+          fixPopupPositionAfterFetch();
         }, 0);
       });
     }

package/lib/esm/Accordion/Accordion.tsx

@@ -2,13 +2,12 @@ import React, { useState, useRef, useEffect } from 'react';
 
 import Item from './AccordionItem';
 
-import animateStyles from 'funda-utils/dist/cjs/anim';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
 // Adapt the easing parameters of TweenMax
 export enum EasingList {
     linear = 'linear',
+    ease = 'ease',
     easeIn = 'ease-in',
     easeOut = 'ease-out',
     easeInOut = 'ease-in-out'
@@ -18,6 +17,7 @@ export enum EasingList {
 export type AccordionOptionChangeFnType = (element: HTMLDivElement, index: number) => void;
 
 
+
 export type AccordionProps = {
     wrapperClassName?: string;
 	/** The index of the item to be displayed by default. Set to -1 to display none, or an array of indices to display multiple items */
@@ -46,7 +46,7 @@ const Accordion = (props: AccordionProps) => {
         defaultActiveIndex,
         defaultActiveAll = false,
         duration,
-        easing,
+        easing = 'ease',
         alternateCollapse = true,
         arrowOnly = false,
         onChange,
@@ -56,17 +56,16 @@ const Accordion = (props: AccordionProps) => {
     const animSpeed = duration || 200;
     const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
     const rootRef = useRef<any>(null);
-    const animPlaceholderRef = useRef<HTMLDivElement>(null);
-    const [animOK, setAnimOK] = useState<boolean>(false);
-    const [heightObserver, setHeightObserver] = useState<number>(-1);
+    const [heightObserver, setHeightObserver] = useState<number[]>([]);
     const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
     const animationInProgress = useRef<boolean>(false);
+    const initExpanded = useRef<boolean>(false);
+        
 
     
     function handleClickItem(e: React.MouseEvent) {
         if (animationInProgress.current) return;
         if ((e.target as any).closest('.custom-accordion-header') === null) return;
-        if (animOK) return;
         
         animationInProgress.current = true;
 
@@ -74,34 +73,10 @@ const Accordion = (props: AccordionProps) => {
         const curIndex: number = parseInt(reactDomEl.dataset.index);
         const reactDomWrapperEl: HTMLElement = rootRef.current;
         const $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
-        const $allContent = reactDomWrapperEl.querySelectorAll('.custom-accordion-content__wrapper');
-        const $curContent = reactDomEl.querySelector('.custom-accordion-content__wrapper');
 
         if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-            setAnimOK(true);
-            setTimeout(() => {
-                setAnimOK(false);
-            }, animSpeed);
-
             if (alternateCollapse) {
-                // Hide other all sibling content
-                Array.prototype.forEach.call($allContent, (node) => {
-                    if (node.clientHeight > 0) {
-                        animateStyles(node, {
-                            startHeight: node.scrollHeight,
-                            endHeight: 0,
-                            speed: animSpeed
-                        } as never, easeType, () => {
-                            animationInProgress.current = false;
-                        });
-                    }
-                });
-
-                // Update all items to collapsed state
-                Array.prototype.forEach.call($li, (node) => {
-                    node.setAttribute('aria-expanded', 'false');
-                });
-
+    
                 // Update expanded items state
                 setExpandedItems(new Set([curIndex]));
             } else {
@@ -109,82 +84,71 @@ const Accordion = (props: AccordionProps) => {
                 setExpandedItems(prev => new Set([...(prev as never), curIndex]));
             }
 
-            reactDomEl.setAttribute('aria-expanded', 'true');
-
-     
-            animateStyles($curContent, {
-                startHeight: 0,
-                endHeight: $curContent.scrollHeight,
-                speed: animSpeed
-            } as never, easeType, () => {
-                setHeightObserver(curIndex);
-                animationInProgress.current = false;
-            });
         } else {
-            reactDomEl.setAttribute('aria-expanded', 'false');
-
+ 
             // Remove current item from expanded items
             setExpandedItems(prev => {
                 const newSet = new Set(prev);
                 newSet.delete(curIndex);
                 return newSet;
             });
-
-            animateStyles($curContent, {
-                startHeight: $curContent.scrollHeight,
-                endHeight: 0,
-                speed: animSpeed
-            } as never, easeType, () => {
-                animationInProgress.current = false;
-            });
         }
 
+        // Reset animation flag after transition duration
+        setTimeout(() => {
+            animationInProgress.current = false;
+        }, animSpeed);
+
         onChange?.(reactDomEl, curIndex);
     }
 
 
-    // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
+    //Initialize expanded items based on defaultActiveIndex or defaultActiveAll
     useEffect(() => {
-        if (defaultActiveAll && children && rootRef.current && animPlaceholderRef.current) {
+
+        // Skip the default height initialization to prevent re-initialization. 
+        // This method is useful when you want to manually control when the accordion should 
+        // skip the automatic height initialization process, especially useful when `children` change frequently.
+        if (initExpanded.current === true) return;
+
+        if (defaultActiveAll && children && rootRef.current) {
             const allIndices = Array.from({ length: (children as any[]).length }, (_, i) => i);
             setExpandedItems(new Set(allIndices));
+            // Set heightObserver for all items to enable height monitoring
+            setHeightObserver(allIndices);
             
-            // Actually expand all items without animation
-            const $allItems = rootRef.current.querySelectorAll('.custom-accordion-item');
-            Array.prototype.forEach.call($allItems, (node, index) => {
-                const $curContent = node.querySelector('.custom-accordion-content__wrapper');
-                if ($curContent) {
-                    // !!! Don't use the .custom-accordion-contentwrapper height directly, it may be more than a dozen pixels
-                    $curContent.style.height = `${node.querySelector('.custom-accordion-content__wrapper > .custom-accordion-content').scrollHeight}px`;
-                }
-            });
-
-
-            animateStyles(animPlaceholderRef.current as HTMLDivElement, {
-                startHeight: 0,
-                endHeight: 10,
-                speed: animSpeed
-            } as never, easeType, () => {
-                setTimeout(() => {
-
-                }, animSpeed);
-            });
-
-
+            //
+            initExpanded.current = true;
         } else if (defaultActiveIndex !== undefined) {
             const initialExpanded = new Set<number>();
+            const observerIndices: number[] = [];
+            
             if (Array.isArray(defaultActiveIndex)) {
-                defaultActiveIndex.forEach(index => initialExpanded.add(index));
+                defaultActiveIndex.forEach(index => {
+                    initialExpanded.add(index);
+                    observerIndices.push(index);
+                });
             } else if (typeof defaultActiveIndex === 'number') {
                 initialExpanded.add(defaultActiveIndex);
+                observerIndices.push(defaultActiveIndex);
             }
+            
             setExpandedItems(initialExpanded);
+            // Set heightObserver for default active items to enable height monitoring
+            if (observerIndices.length > 0) {
+                setHeightObserver(observerIndices);
+            }
+
+            //
+            initExpanded.current = true;
+
         }
+        
     }, [defaultActiveIndex, defaultActiveAll, children]);
     
+    
     return (
         <>
-            <div className="custom-accordion-anim-placeholder" style={{display: 'none'}} ref={animPlaceholderRef}></div>
             <div className={combinedCls(
                 'custom-accordion-item',
                 clsWrite(wrapperClassName, 'accordion')
@@ -204,6 +168,7 @@ const Accordion = (props: AccordionProps) => {
                         index={i}
                         defaultActiveAll={defaultActiveAll}
                         animSpeed={animSpeed}
+                        easing={easeType}
                         arrowOnly={arrowOnly}
                         heightObserver={heightObserver}
                         activeItem={_defaultActive}

package/lib/esm/Accordion/AccordionItem.tsx

@@ -4,11 +4,11 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 export type AccordionItemProps = {
-    heightObserver?: number;
+    heightObserver?: number[];
     index?: number;
     arrowOnly?: boolean;
     animSpeed?: number;
-    easeType?: string;
+    easing?: string;
     /** Class of items */
     itemClassName?: string;
     itemContentWrapperClassName?: string;
@@ -41,7 +41,7 @@ const AccordionItem = (props: AccordionItemProps) => {
         heightObserver,
         index,
         animSpeed,
-        easeType,
+        easing,
         arrowOnly,
         itemClassName,
         itemContentWrapperClassName,
@@ -83,6 +83,19 @@ const AccordionItem = (props: AccordionItemProps) => {
         onToggleEv?.(e);
     };
 
+
+    // Generate CSS transition style
+    const getTransitionStyle = () => {
+        const transitionDuration = `${animSpeed}ms`;
+        const transitionTiming = easing;
+        
+        return {
+            transition: `max-height ${transitionDuration} ${transitionTiming}`,
+            overflow: 'hidden'
+        };
+    };
+
+
     useEffect(() => {
         if (triggerRef.current && typeof onItemCollapse === 'function') {
             if (isFirstRender.current) {
@@ -91,7 +104,7 @@ const AccordionItem = (props: AccordionItemProps) => {
             }
             onItemCollapse(triggerRef.current, iconRef.current as HTMLElement, isExpanded);
         }
-    }, [isExpanded, onItemCollapse]);
+    }, [isExpanded]);
 
     useEffect(() => {
         if (contentWrapperRef.current && !initialHeightSet.current) {
@@ -101,47 +114,55 @@ const AccordionItem = (props: AccordionItemProps) => {
                 setInternalExpanded(shouldBeExpanded);
             }
             
-            // Set initial height when activeItem is true
+            // Set initial maxHeight when activeItem is true
             if (shouldBeExpanded && contentRef.current) {
                 const contentHeight = contentRef.current.offsetHeight;
-                contentWrapperRef.current.style.height = `${contentHeight}px`;
+                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
             }
         }
     }, [activeItem, controlledExpanded]);
 
     useEffect(() => {
+        if (!heightObserver || !Array.isArray(heightObserver) || !heightObserver.includes(index as number)) return;
 
-        if (parseFloat(heightObserver as never) !== index) return;
-
-        // When the content height changes dynamically, change the height of the wrapper
+        // When the content height changes dynamically, change the maxHeight of the wrapper
         if (contentRef.current && contentWrapperRef.current) {
             const _contentPadding = window.getComputedStyle(contentRef.current as HTMLDivElement).getPropertyValue('padding-bottom');
        
             observer.current = new ResizeObserver(entries => {
-
                 if (!Array.isArray(entries) || !entries.length) {
                     return;
                 }
 
                 entries.forEach(entry => {
-                    if (contentWrapperRef.current !== null) (contentWrapperRef.current as HTMLDivElement).style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+                    if (contentWrapperRef.current !== null && isExpanded) {
+                        (contentWrapperRef.current as HTMLDivElement).style.maxHeight = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+                    }
                 });
             });
             observer.current.observe(contentRef.current);
-
         }
 
         return () => {
             if (contentRef.current) observer.current?.unobserve(contentRef.current);
         };
 
+    }, [heightObserver, isExpanded]);
 
-    }, [heightObserver]);
-
+    // Update maxHeight when expanded state changes
+    useEffect(() => {
+        if (contentWrapperRef.current && contentRef.current) {
+            if (isExpanded) {
+                const contentHeight = contentRef.current.scrollHeight;
+                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
+            } else {
+                contentWrapperRef.current.style.maxHeight = '0px';
+            }
+        }
+    }, [isExpanded]);
 
     return (
         <>
-
             <div
                 {...attributes}
                 data-index={index}
@@ -211,10 +232,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                         clsWrite(itemContentWrapperClassName, 'accordion-collapse')
                     )}
                     role="tabpanel" 
-                    style={{
-                        height: '0',
-                        overflow: 'hidden'   // "overflow" affects the width, so add `w-100` to `custom-accordion-content__wrapper`
-                    }}>
+                    style={getTransitionStyle()}>
                     <div className={combinedCls(
                         'custom-accordion-content',
                         clsWrite(itemContentClassName, 'accordion-body')

package/lib/esm/Accordion/index.tsx

@@ -1,2 +1,2 @@
 export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
+export { default as AccordionItem } from './AccordionItem';

package/lib/esm/Select/index.tsx

@@ -47,7 +47,6 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export interface MultiSelectValue {
     items: { label: string; value: string }[];
     labels: string[];
@@ -273,7 +272,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
     // loading
-    const [fetchLoading, setFetchLoading] = useState(false);
+    const [fetchLoading, setFetchLoading] = useState<boolean>(false);
     const loadingOutput = <><div className="cus-select-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></>;
 
 
@@ -500,21 +499,27 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
             // Make a request
             handleFetch(val).then((response: any) => {
-      
+
                 // pop win initalization
                 setTimeout(() => {
                     popwinPosInit();
                     popwinFilterItems(val);
+
+                    // Fix popup position after fetch loading completes
+                    fixPopupPositionAfterFetch();
+
                 }, 0);
 
                 setFetchLoading(false);
             });
         } else {
+            
    
             // pop win initalization
             setTimeout(() => {
                 popwinPosInit();
                 popwinFilterItems(val);
+                
             }, 0);
 
             setFetchLoading(false);
@@ -1190,14 +1195,15 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
         const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
-        const emptyFieldsCheck = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).every((node: any) => {
+        const _items = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'));
+        const itemsDoNotExist = _items.every((node: any) => {
             if (!node.classList.contains('hide')) {
                 return false;
             }
             return true;
         });
 
-        if (emptyFieldsCheck) {
+        if (itemsDoNotExist) {
             _noDataDiv.classList.remove('hide');
             if (_btnSelectAll !== null) _btnSelectAll.classList.add('hide');
         } else {
@@ -1221,6 +1227,28 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     }
 
+    
+    function fixPopupPositionAfterFetch() {
+        if (listContentRef.current === null || !isOpen) return;
+        
+        // Get the current position data
+        const currentPos = listContentRef.current.dataset.pos;
+        
+        if (currentPos === 'top') {
+            // Recalculate position for upward popup to fix offset issues
+            const _modalRef: any = document.querySelector(`#custom-select__options-wrapper-${idRes}`);
+            if (_modalRef && rootRef.current && selectInputRef.current) {
+                const { x } = getAbsolutePositionOfStage(rootRef.current);
+                const { y } = getAbsolutePositionOfStage(selectInputRef.current);
+                
+                _modalRef.style.left = x + 'px';
+                const topPosition = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2;
+                _modalRef.style.top = topPosition + 'px';
+            }
+        }
+    }
+
+    
     function cancel() {
         // hide list
         setIsOpen(false);
@@ -2112,6 +2140,17 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }
 
 
+    // Select all detection functions in the input box (for "Single selection")
+    function checkUserInputboxIsAllSelected(e: any) {
+        const input = e.target;
+        if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+            setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+        } else {
+            setUserInputboxIsAllSelected(false);
+        }
+    }
+
+
     useEffect(() => {
 
         // Call a function when the component has been rendered completely
@@ -2278,15 +2317,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
 
-    // Select all detection functions in the input box (for "Single selection")
-    function checkUserInputboxIsAllSelected(e: any) {
-        const input = e.target;
-        if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
-            setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
-        } else {
-            setUserInputboxIsAllSelected(false);
-        }
-    }
 
 
     return (
@@ -2515,6 +2545,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                     setTimeout(() => {
                                         popwinPosInit();
                                         popwinFilterItems(controlTempValue);
+
+                                        // Fix popup position after fetch loading completes
+                                        fixPopupPositionAfterFetch();
+
                                     }, 0);
                                 });
                                 
@@ -2787,6 +2821,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                     setTimeout(() => {
                                         popwinPosInit();
                                         popwinFilterItems(controlTempValue);
+
+                                        // Fix popup position after fetch loading completes
+                                        fixPopupPositionAfterFetch();
+
                                     }, 0);
                                 });
                             }}>

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.545",
+  "version": "4.7.560",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",