100% working DD

Parts/DropDown.js

@@ -1,8 +1,10 @@
 import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { createPopper } from "@popperjs/core";
+import { usePopper } from 'react-popper';
 
 import tw, { styled } from "twin.macro"
 import "styled-components/macro"
+
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 
 const DropDownItem = styled.button(({ type }) => [
@@ -21,15 +23,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
 
   const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
 
-  const btnDropdownRef = React.createRef();
-  const popoverDropdownRef = React.createRef();
+  const [btnDropdownRef, setBtnDropdownRef] = React.useState(null);
+  const [popoverDropdownRef, setPopoverDropdownRef] = React.useState(null);
 
-  const openDropdownPopover = () => {
-    createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
-      placement: placement ?? "bottom",
-      ...popper
-    });
+  const { styles, attributes, update } = usePopper(btnDropdownRef, popoverDropdownRef,
+    { placement: placement ?? "bottom", ...popper });
+
+  const openDropdownPopover = async () => {
     setDropdownPopoverShow(true);
+    console.log(update)
+    await update();
 
     onValueChanged && onValueChanged(true);
   };
@@ -39,7 +42,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
   };
 
   function handleOutsideClick(event) {
-    let node = popoverDropdownRef?.current;
+    let node = popoverDropdownRef;
     if (node && !node?.contains(event.target)) {
       closeDropdownPopover();
     }
@@ -74,31 +77,34 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
   return (
     <>
       <button
-        ref={btnDropdownRef}
-        onClick={(e) => {
+        ref={setBtnDropdownRef}
+        onClick={async (e) => {
           e.preventDefault();
-          dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
+          dropdownPopoverShow ? closeDropdownPopover() : await openDropdownPopover();
         }}
-        onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }}
+        onMouseEnter={async () => { setOverButton(true); hover && await openDropdownPopover() }}
         onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
         {...buttonProps}
       >
         {button}
       </button>
+      {dropdownPopoverShow &&
         <div
           {...props}
-        ref={popoverDropdownRef}
-        onMouseEnter={() => { setOverDropDown(true); hover && openDropdownPopover() }}
+          ref={setPopoverDropdownRef}
+          onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
           onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
+          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
           ]}
         >
-        {dropdownPopoverShow && childrenWithProps}
+          {childrenWithProps}
         </div>
+      }
     </>
   );
 });
@@ -111,8 +117,7 @@ export function DropdownMenu({ children, fallback, button, notSelectedOne = true
   if (children && children.length > 0)
     btn = children[value > children.length ? 0 : value]
 
-  if(button != null)
-  {
+  if (button != null) {
     btn = button(btn, value > children.length ? 0 : value);
   }