From 0f8a57b9d2c3b11dbaf7f03feebf4532755517c5 Mon Sep 17 00:00:00 2001
From: Maxime Fafard <maxfafard@gmail.com>
Date: Wed, 7 Dec 2022 23:10:45 -0500
Subject: [PATCH] fix(popover): fire "click:outside" event when clicking
 sibling elements (#1570)

---
 COMPONENT_INDEX.md                            |  6 +--
 docs/src/COMPONENT_API.json                   |  6 ++-
 docs/src/pages/components/Popover.svx         |  6 +++
 .../pages/framed/Popover/WithButton.svelte    | 37 +++++++++++++++++++
 src/Popover/Popover.svelte                    |  8 +++-
 types/Popover/Popover.svelte.d.ts             |  2 +-
 6 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 docs/src/pages/framed/Popover/WithButton.svelte

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 76ce3dd8..c92b69aa 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2804,9 +2804,9 @@ None.
 
 ### Events
 
-| Event name    | Type       | Detail            |
-| :------------ | :--------- | :---------------- |
-| click:outside | dispatched | <code>null</code> |
+| Event name    | Type       | Detail                                |
+| :------------ | :--------- | :------------------------------------ |
+| click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
 
 ## `ProgressBar`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e3ad94a1..6d18c68f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8908,7 +8908,11 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
-        { "type": "dispatched", "name": "click:outside", "detail": "null" }
+        {
+          "type": "dispatched",
+          "name": "click:outside",
+          "detail": "{ target: HTMLElement; }"
+        }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx
index 03f1da78..d756b572 100644
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@@ -36,6 +36,12 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
     </Popover>
 </div>
 
+## Manage open state with a Button
+
+You can bind the `open` prop and manage the open state of the popover with an external button.
+
+<FileSource src="/framed/Popover/WithButton" />
+
 ## Popover alignment
 
 Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
diff --git a/docs/src/pages/framed/Popover/WithButton.svelte b/docs/src/pages/framed/Popover/WithButton.svelte
new file mode 100644
index 00000000..fd3b6951
--- /dev/null
+++ b/docs/src/pages/framed/Popover/WithButton.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Popover, Button } from "carbon-components-svelte";
+
+  let open = true;
+  let containerRef = null;
+</script>
+
+<div data-outline>
+  <div
+    bind:this="{containerRef}"
+    style:position="relative"
+    style:display="inline-block"
+  >
+    <Button on:click="{() => (open = !open)}">Click to open</Button>
+    <Popover
+      bind:open
+      align="bottom-left"
+      on:click:outside="{({ detail }) => {
+        console.log('on:click:outside');
+        if (!containerRef.contains(detail.target)) {
+          open = false;
+        }
+      }}"
+    >
+      <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+  </div>
+  <div>
+    <br />
+    Anim eu laboris veniam in est elit ullamco enim irure id. Lorem est culpa ex
+    in enim enim. Culpa quis incididunt magna officia et aliqua. Ullamco deserunt
+    aute enim cupidatat. Culpa quis enim sint sint anim qui irure exercitation labore
+    occaecat in reprehenderit proident. Nisi laborum ut et amet commodo amet ullamco
+    commodo non aliqua magna ad eu. Ad aliquip minim nostrud id enim elit velit ullamco
+    pariatur eu excepteur pariatur cillum.
+  </div>
+</div>
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 2287a72d..f76949e3 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ target: HTMLElement; }} click:outside
+   */
+
   /** Set to `true` to display the popover */
   export let open = false;
 
@@ -33,8 +37,8 @@
 <svelte:window
   on:click="{(e) => {
     if (!open) return;
-    if (e.target.contains(ref)) {
-      dispatch('click:outside');
+    if (!ref.contains(e.target)) {
+      dispatch('click:outside', { target: e.target });
       if (closeOnOutsideClick) open = false;
     }
   }}"
diff --git a/types/Popover/Popover.svelte.d.ts b/types/Popover/Popover.svelte.d.ts
index 7e6f12b3..bbb90eda 100644
--- a/types/Popover/Popover.svelte.d.ts
+++ b/types/Popover/Popover.svelte.d.ts
@@ -60,6 +60,6 @@ export interface PopoverProps
 
 export default class Popover extends SvelteComponentTyped<
   PopoverProps,
-  { ["click:outside"]: CustomEvent<null> },
+  { ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
   { default: {} }
 > {}