[Bug]: Popover click interaction behavior does not match spec'ed guidance

[tay1orjones]

Package

@carbon/react

Browser

Chrome

Package version

1.25.0

React version

17

Description

From the website:

Behavior -> Interactions -> Mouse
Click: Open the popover by clicking on the trigger button. Close the popover by clicking on the trigger button again, or anywhere outside of the open popover container.

So I see two things we need to address:

• Popover implementation does not limit only one popover open at a time (see example here, both tab tip popovers can be open at the same time). Although, this can be easily implemented in an application via state stored in a shared context.
• Clicking outside the popover does not dismiss the popover

While Popover doesn’t have these two details correct, Toggletip does have both of these behaviors since it’s open/close is tied to focus of the trigger element. Maybe we could lift this up out of Toggletip and into the Popover so all popover-based elements could benefit from the change?

Reproduction/example

You can see in storybook: https://react.carbondesignsystem.com/?path=/story/components-popover--tab-tip

Steps to reproduce

Click to open both popovers, more than one is rendered at a time.

Click outside of the popover, it does not close the already open popover(s)

[tay1orjones]

Here is the related internal slack discussion confirming the implementation is incorrect right now and needs to be updated.