forstok-ui-lib 8.5.6 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.5.6",
+  "version": "8.5.8",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/dropdown/index.tsx

@@ -21,6 +21,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
   const getViewportWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 
   const getDropdownWrapperElement = (parentEl: ParentNode | null) => parentEl?.querySelector('._refDropdownWrapper') as HTMLElement | null;
+  const withNextFrame = (callback: () => void) => window.requestAnimationFrame(() => callback());
 
   const getDropdownPlacement = (containerEl: HTMLElement, wrapperEl: HTMLElement) => {
     if ($placement === 'top') {
@@ -50,6 +51,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
 
   const applyDropdownPlacement = (wrapperEl: HTMLElement, placement: 'top' | 'bottom') => {
     if (placement === 'top') {
+      wrapperEl.style.animation = 'none'; // stop CSS animation from overriding top:auto
       wrapperEl.style.top = 'auto';
       wrapperEl.style.bottom = `${getOffsetValue($bottom, DEFAULT_BOTTOM_OFFSET)}px`;
       return;
@@ -67,6 +69,15 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       wrapperEl.style.left = '';
       wrapperEl.style.right = '';
       wrapperEl.style.transform = '';
+      wrapperEl.style.visibility = '';
+      wrapperEl.style.animation = '';
+    }
+  };
+
+  const setDropdownVisibility = (parentEl: ParentNode | null, visibility: 'hidden' | 'visible') => {
+    const wrapperEl = getDropdownWrapperElement(parentEl);
+    if (wrapperEl) {
+      wrapperEl.style.visibility = visibility;
     }
   };
 
@@ -170,6 +181,9 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
           evResetDropdown();  
           overlayEl.style.display = 'block';
           bodyEl.classList.add('is-immuned');
+          if (!portalId) {
+            setDropdownVisibility(containerEl, 'hidden');
+          }
           containerEl.classList.add('is-shown');
           setTimeout(() => {
             if (portalId) {
@@ -183,7 +197,10 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
                 }, 10);
               }
             } else {
-              setInlineDropdownPlacement(containerEl);
+              withNextFrame(() => {
+                setInlineDropdownPlacement(containerEl);
+                setDropdownVisibility(containerEl, 'visible');
+              });
             }
           }, 10);
           onClick && onClick(e);