From b568e8a94c96942064d5e92a472fe8005f748eb1 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Wed, 18 Jan 2023 17:02:09 -0600
Subject: [PATCH] fix(popover): update autoAlign to work when open is initially
 false (#12938)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/Popover/Popover.stories.js | 26 ++++++++++++++++++-
 .../react/src/components/Popover/index.js     |  6 ++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
index c34f4eb4fd8e..e7abe738889e 100644
--- 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
index 4d030fec1970..cf0018e14072 100644
--- 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}>