Close the Popover when an item is clicked (#1124)

* Close the Popover when an item is clicked

* Add changeset

.changeset/eight-papayas-complain.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Changed the Popover behavior to close when one of the items is clicked.

packages/circuit-ui/components/Popover/Popover.spec.tsx

@@ -212,6 +212,18 @@ describe('Popover', () => {
       expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
     });
 
+    it('should close the popover when clicking a popover item', () => {
+      const { getAllByRole } = renderPopover(baseProps);
+
+      const popoverItems = getAllByRole('menuitem');
+
+      act(() => {
+        userEvent.click(popoverItems[0]);
+      });
+
+      expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
+    });
+
     it('should move focus to the first popover item after opening', () => {
       const { getAllByRole, rerender } = renderPopover({
         ...baseProps,

packages/circuit-ui/components/Popover/Popover.tsx

@@ -384,6 +384,16 @@ export const Popover = ({
     }
   };
 
+  const handlePopoverItemClick = (
+    event: ClickEvent,
+    onClick: BaseProps['onClick'],
+  ) => {
+    if (onClick) {
+      onClick(event);
+      onToggle(false);
+    }
+  };
+
   return (
     <Fragment>
       <TriggerElement ref={triggerEl}>
@@ -419,7 +429,14 @@ export const Popover = ({
               isDivider(action) ? (
                 <Hr css={dividerStyles} key={index} />
               ) : (
-                <PopoverItem key={index} {...action} {...focusProps} />
+                <PopoverItem
+                  key={index}
+                  {...action}
+                  {...focusProps}
+                  onClick={(event) =>
+                    handlePopoverItemClick(event, action.onClick)
+                  }
+                />
               ),
             )}
           </PopoverMenu>