From af26bdb10a4c7f8a1db487fd5d84a9a10fc15752 Mon Sep 17 00:00:00 2001
From: Phil Mayer <36088294+phil-mayer@users.noreply.github.com>
Date: Thu, 22 Jul 2021 12:44:23 -0400
Subject: [PATCH] fix: close overlays on window click (#761)

---
 src/ComboBox/ComboBox.svelte                   | 5 +++--
 src/DatePicker/DatePicker.svelte               | 5 +++--
 src/MultiSelect/MultiSelect.svelte             | 5 +++--
 src/OverflowMenu/OverflowMenu.svelte           | 5 +++--
 src/Slider/Slider.svelte                       | 5 +++--
 src/Tooltip/Tooltip.svelte                     | 5 +++--
 src/TooltipDefinition/TooltipDefinition.svelte | 5 +++--
 src/TooltipIcon/TooltipIcon.svelte             | 5 +++--
 8 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 918b9c1b..2da898b5 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -152,12 +152,13 @@
   $: value = inputValue;
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div class:bx--list-box__wrapper="{true}">
   {#if titleText}
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 00a9c81c..7ebde86c 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -192,12 +192,13 @@
   $: if ($hasCalendar && !calendar && inputRef) initCalendar();
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (!calendar || !calendar.isOpen) return;
     if (datePickerRef && datePickerRef.contains(target)) return;
     if (!calendar.calendarContainer.contains(target)) calendar.close();
-  }}" />
+  }}"
+/>
 
 <div
   class:bx--form-item="{true}"
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index d6c52177..7d34cdd3 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -238,12 +238,13 @@
   $: value = inputValue;
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (open && multiSelectRef && !multiSelectRef.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div
   bind:this="{multiSelectRef}"
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index d7c3d8b5..1455fbe9 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -165,13 +165,14 @@
   {@html styles}
 </svelte:head>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <button
   bind:this="{buttonRef}"
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 7d61c11c..cdead20b 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -116,12 +116,13 @@
   }
 </script>
 
-<svelte:body
+<svelte:window
   on:mousemove="{move}"
   on:touchmove="{move}"
   on:mouseup="{stopHolding}"
   on:touchend="{stopHolding}"
-  on:touchcancel="{stopHolding}" />
+  on:touchcancel="{stopHolding}"
+/>
 
 <div
   class:bx--form-item="{true}"
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index f1edaa6e..368582d2 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -163,7 +163,7 @@
   };
 </script>
 
-<svelte:body
+<svelte:window
   on:mousedown="{({ target }) => {
     if (open && target.contains(refTooltip)) {
       if (refIcon) {
@@ -174,7 +174,8 @@
 
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div
   {...$$restProps}
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 9dac2cbb..ae79ed35 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -31,10 +31,11 @@
   }
 </script>
 
-<svelte:body
+<svelte:window
   on:keydown="{({ key }) => {
     if (key === 'Escape') hide();
-  }}" />
+  }}"
+/>
 
 <span
   class:bx--tooltip--definition="{true}"
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index ef76e957..62a41245 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -35,12 +35,13 @@
   let hidden = false;
 </script>
 
-<svelte:body
+<svelte:window
   on:keydown="{({ key }) => {
     if (key === 'Escape') {
       hidden = true;
     }
-  }}" />
+  }}"
+/>
 
 <button
   bind:this="{ref}"