DD fix

Parts/DropDown.js

@@ -27,12 +27,18 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
   const [popoverDropdownRef, setPopoverDropdownRef] = React.useState(null);
 
   const { styles, attributes, update } = usePopper(btnDropdownRef, popoverDropdownRef,
-    { placement: placement ?? "bottom", ...popper });
+    {
+      placement: placement ?? "bottom",
+      strategy: "fixed",
+      ...popper
+    });
 
   const openDropdownPopover = async () => {
     setDropdownPopoverShow(true);
-    console.log(update)
+
+    if (update != null) {
       await update();
+    }
 
     onValueChanged && onValueChanged(true);
   };
@@ -43,7 +49,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
 
   function handleOutsideClick(event) {
     let node = popoverDropdownRef;
-    if (node && !node?.contains(event.target)) {
+    if (node && !node?.contains(event.target) && !btnDropdownRef?.contains(event.target)) {
       closeDropdownPopover();
     }
   }
@@ -60,11 +66,11 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
       document.removeEventListener("click", handleOutsideClick)
     };
   });
-
+  /*
     useImperativeHandle(ref, () => ({
       openDropdownPopover,
       closeDropdownPopover
-  }))
+    }))*/
 
   let childrenWithProps = React.Children.map(children, (item) => {
     if (!item)
@@ -88,8 +94,8 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
       >
         {button}
       </button>
-      {dropdownPopoverShow &&
-        <div
+
+      {dropdownPopoverShow && <div
         {...props}
         ref={setPopoverDropdownRef}
         onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
@@ -97,14 +103,15 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
         style={styles.popper}
         {...attributes.popper}
         css={[
+          dropdownPopoverShow ? tw`block` : tw`hidden`,
           tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
           dropdownCss,
           props.css
         ]}
       >
         {childrenWithProps}
-        </div>
-      }
+      </div>}
+
     </>
   );
 });