From c5efb6bcd87fae5366a3b73b510e668fb2f9da01 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 6 Dec 2020 05:07:32 -0800
Subject: [PATCH] Close tooltip on mousedown event, add reactive, hidden icon
 examples (#450)

* fix(tooltip): close tooltip on mousedown event

- remove blur event from tooltip; stop click, mouse propagation on tooltip content
- remove tabindex from open tooltip to prevent outline ring
- refocus trigger icon or trigger text when closing
- remove useless programmatic variable

* docs(tooltip): add reactive example, hidden icon example
---
 docs/src/pages/components/Tooltip.svx         | 12 ++++++++++
 .../framed/Tooltip/TooltipReactive.svelte     | 23 +++++++++++++++++++
 src/Tooltip/Tooltip.svelte                    | 22 ++++++++----------
 3 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 docs/src/pages/framed/Tooltip/TooltipReactive.svelte

diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx
index a9deb31b..f4f6d538 100644
--- a/docs/src/pages/components/Tooltip.svx
+++ b/docs/src/pages/components/Tooltip.svx
@@ -20,6 +20,10 @@
   </p>
 </Tooltip>
 
+### Reactive example
+
+<FileSource src="/framed/Tooltip/TooltipReactive" />
+
 ### Directions
 
 <Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
@@ -60,4 +64,12 @@
   <p>
     Resources are provisioned based on your account's organization.
   </p>
+</Tooltip>
+
+### Hidden icon
+
+<Tooltip hideIcon triggerText="Resource list">
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
 </Tooltip>
\ No newline at end of file
diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
new file mode 100644
index 00000000..8d131ae1
--- /dev/null
+++ b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { Tooltip, Button } from "carbon-components-svelte";
+
+  let open = true;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Tooltip bind:open triggerText="Resource list" align="start">
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+
+<div style="margin-top: var(--cds-spacing-12);">
+  <Button size="small" on:click="{() => (open = !open)}">
+    {open ? 'Close tooltip' : 'Open tooltip'}
+  </Button>
+</div>
+
+<div>Open: {open}</div>
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index ca6076fa..3f2bd110 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -68,8 +68,6 @@
 
   const dispatch = createEventDispatcher();
 
-  let programmatic = true;
-
   function onKeydown(e) {
     if (e.key === "Escape") {
       e.stopPropagation();
@@ -88,15 +86,9 @@
   }
 
   function openMenu() {
-    programmatic = false;
     open = true;
   }
 
-  function closeMenu() {
-    programmatic = false;
-    open = false;
-  }
-
   afterUpdate(() => {
     if (open) {
       const button = ref.getBoundingClientRect();
@@ -167,8 +159,14 @@
 </script>
 
 <svelte:body
-  on:click="{({ target }) => {
-    if (!programmatic && open && refTooltip && !refTooltip.contains(target)) {
+  on:mousedown="{({ target }) => {
+    if (open && target.contains(refTooltip)) {
+      if (refIcon) {
+        refIcon.focus();
+      } else if (ref) {
+        ref.focus();
+      }
+
       open = false;
     }
   }}" />
@@ -206,7 +204,6 @@
     <div
       bind:this="{refTooltip}"
       role="tooltip"
-      tabindex="0"
       id="{tooltipId}"
       data-floating-menu-direction="{direction}"
       class:bx--tooltip="{true}"
@@ -218,10 +215,11 @@
       class:bx--tooltip--align-center="{align === 'center'}"
       class:bx--tooltip--align-start="{align === 'start'}"
       class:bx--tooltip--align-end="{align === 'end'}"
-      on:blur="{closeMenu}"
     >
       <span class:bx--tooltip__caret="{true}"></span>
       <div
+        on:click|stopPropagation
+        on:mousedown|stopPropagation
         class:bx--tooltip__content="{true}"
         tabIndex="-1"
         role="dialog"