Fix Popover cannot be closed by changing isOpen (#3486)

Co-authored-by: Jason Huang <[email protected]>

packages/bpk-component-popover/src/BpkPopover-test.tsx

@@ -46,6 +46,29 @@ describe('BpkPopover', () => {
     expect(screen.getByText('My popover content')).toBeVisible();
   });
 
+  it('should rerender correctly with "isOpen" provided', () => {
+    const props = {
+      id: 'my-popover',
+      onClose: () => null,
+      label: 'My popover',
+      closeButtonLabel: 'Close',
+      target: <button type="button">My target</button>,
+    };
+    const { rerender } = render(
+      <BpkPopover {...props} isOpen>
+        My popover content
+      </BpkPopover>,
+    );
+
+    rerender(
+      <BpkPopover {...props} isOpen={false}>
+        My popover content
+      </BpkPopover>,
+    );
+
+    expect(screen.queryByRole('My popover content')).not.toBeInTheDocument();
+  });
+
   it('should render without an arrow', () => {
     const target = (<button type="button">My target</button>);
     render(

packages/bpk-component-popover/src/BpkPopover.tsx

@@ -17,7 +17,7 @@
  */
 
 import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
-import { useState, useRef, cloneElement, isValidElement } from 'react';
+import { useState, useEffect, useRef, cloneElement, isValidElement } from 'react';
 
 import {
   useFloating,
@@ -125,6 +125,13 @@ const BpkPopover = ({
   ...rest
 }: Props) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsOpenState(false)
+    }
+  }, [isOpen]);
+
   const arrowRef = useRef(null);
 
   const { context, floatingStyles, refs } = useFloating({