From 65f85452ede089990f478ca603f3f144df81eb7f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 6 Dec 2020 04:50:08 -0800
Subject: [PATCH] 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
---
 src/Tooltip/Tooltip.svelte | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

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"