fix(popover): update autoAlign to work when open is initially false (#…

…12938) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 18, 2023 · b568e8a · b568e8a
1 parent f4d0253
commit b568e8a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
@@ -7,7 +7,7 @@
 
 import './story.scss';
 import { Checkbox } from '@carbon/icons-react';
-import React from 'react';
+import React, { useState } from 'react';
 import { Popover, PopoverContent } from '../Popover';
 import mdx from './Popover.mdx';
 
@@ -129,8 +129,32 @@ Playground.story = {
 };
 
 export const AutoAlign = () => {
+  const [open, setOpen] = useState(false);
   return (
     <div>
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          right: '50%',
+          margin: '3rem',
+        }}>
+        <Popover open={open} autoAlign>
+          <div className="playground-trigger">
+            <Checkbox
+              onClick={() => {
+                setOpen(!open);
+              }}
+            />
+          </div>
+          <PopoverContent className="p-3">
+            <p className="popover-title">Available storage</p>
+            <p className="popover-details">
+              This server has 150 GB of block storage remaining.
+            </p>
+          </PopoverContent>
+        </Popover>
+      </div>
       <Popover open autoAlign>
         <div className="playground-trigger">
           <Checkbox />

diff --git a/packages/react/src/components/Popover/index.js b/packages/react/src/components/Popover/index.js
@@ -56,6 +56,10 @@ const Popover = React.forwardRef(function Popover(props, forwardRef) {
   });
 
   useIsomorphicEffect(() => {
+    if (!open) {
+      return;
+    }
+
     if (!autoAlign) {
       setAutoAligned(false);
       return;
@@ -166,7 +170,7 @@ const Popover = React.forwardRef(function Popover(props, forwardRef) {
       setAutoAligned(true);
       setAutoAlignment(alignment);
     }
-  }, [autoAligned, align, autoAlign, prefix]);
+  }, [autoAligned, align, autoAlign, prefix, open]);
 
   return (
     <PopoverContext.Provider value={value}>