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

@@ -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>

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>

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"