fix(popup): Fix wrong placement of Popper refs #256765 #384 from eea/…

…popper
eea · Aug 29, 2023 · ee69ca2 · ee69ca2
2 parents 8802322 + 005f2be
commit ee69ca2
Showing 1 changed file with 24 additions and 17 deletions.
diff --git a/src/ui/Popup/Popup.jsx b/src/ui/Popup/Popup.jsx
@@ -18,7 +18,6 @@ function Popup(props) {
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-
   const options = {
     placement: positionsMapping[props.position] || 'bottom-end',
     strategy: props.positionFixed || 'absolute',
@@ -33,12 +32,19 @@ function Popup(props) {
     ],
   };
 
-  const { styles, attributes } = usePopper(
+  const { styles, attributes, update } = usePopper(
     triggerRef.current,
     popupRef.current,
     options,
   );
 
+  useEffect(() => {
+    const updatePlacement = async () => {
+      if (typeof update === 'function') await update();
+    };
+    updatePlacement();
+  }, [isOpen, update]);
+
   const handleClickOutside = (event) => {
     if (
       popupRef.current &&
@@ -72,7 +78,6 @@ function Popup(props) {
   const { trigger, className, size, position, basic, content, on } = props;
 
   const onEvent = 'on' + on.charAt(0).toUpperCase() + on.slice(1);
-
   return (
     <React.Fragment>
       {trigger && (
@@ -90,20 +95,22 @@ function Popup(props) {
         {...attributes.popper}
       >
         {isOpen && <EventStack name="keydown" on={closeOnEscape} />}
-        <React.Fragment>
-          <div
-            className={cx(
-              'ui popup transition',
-              className,
-              size,
-              position,
-              basic ? 'basic' : '',
-              isOpen ? 'visible' : '',
-            )}
-          >
-            {content}
-          </div>
-        </React.Fragment>
+        {isOpen && (
+          <React.Fragment>
+            <div
+              className={cx(
+                'ui popup transition',
+                className,
+                size,
+                position,
+                basic ? 'basic' : '',
+                'visible',
+              )}
+            >
+              {content}
+            </div>
+          </React.Fragment>
+        )}
       </div>
     </React.Fragment>
   );