feat(tooltip): Close tooltip on keypress

telus · Oct 5, 2017 · cd7916e · cd7916e
1 parent 49ede6b
commit cd7916e
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
@@ -40,9 +40,17 @@ class Tooltip extends React.Component {
 
   componentDidUpdate() {
     if (this.state.open) {
-      document.addEventListener('click', this.toggleBubble)
+      document.addEventListener('click', this.toggleBubbleOutsideOfTrigger)
+      document.addEventListener('keypress', this.toggleBubbleOutsideOfTrigger)
     } else {
-      document.removeEventListener('click', this.toggleBubble)
+      document.removeEventListener('click', this.toggleBubbleOutsideOfTrigger)
+      document.removeEventListener('keypress', this.toggleBubbleOutsideOfTrigger)
+    }
+  }
+
+  toggleBubbleOutsideOfTrigger = event => {
+    if (event.target !== this.trigger) {
+      this.toggleBubble()
     }
   }
 
@@ -88,6 +96,9 @@ class Tooltip extends React.Component {
           aria-controls={id}
           aria-haspopup="true"
           aria-expanded={this.state.open ? 'true' : 'false'}
+          ref={trigger => {
+            this.trigger = trigger
+          }}
         >
           <StandaloneIcon
             symbol="questionMarkCircle"