From 5f36a80471ef0dce4af532b80c914524fc716a27 Mon Sep 17 00:00:00 2001
From: Duncan Graham Walker <walkerdu@bc.edu>
Date: Sat, 21 Oct 2017 17:19:25 -0400
Subject: [PATCH] esc keydown only firing once per press

---
 addon/components/ember-tooltip-base.js        |  8 +++++---
 addon/styles/_mixins.scss                     | 19 ++++++++-----------
 addon/styles/addon.scss                       | 11 +++++------
 tests/dummy/app/styles/app.scss               |  1 -
 tests/dummy/app/templates/index.hbs           |  4 ++++
 ...ip-is-visible-test.js => is-shown-test.js} |  0
 6 files changed, 22 insertions(+), 21 deletions(-)
 rename tests/integration/components/{tooltip-is-visible-test.js => is-shown-test.js} (100%)

diff --git a/addon/components/ember-tooltip-base.js b/addon/components/ember-tooltip-base.js
index 92b0e75c..046a5c53 100644
--- a/addon/components/ember-tooltip-base.js
+++ b/addon/components/ember-tooltip-base.js
@@ -278,6 +278,8 @@ export default Component.extend({
     }
 
     this._addEventListener('keydown', (keyEvent) => {
+      keyEvent.stopImmediatePropagation(); /* So this callback only fires once per keydown */
+
       if (keyEvent.which === 27) {
         this.hide();
 
@@ -460,13 +462,12 @@ export default Component.extend({
   },
 
   _hideTooltip() {
+    const _tooltip = this.get('_tooltip');
 
-    if (this.get('isDestroying')) {
+    if (!_tooltip || this.get('isDestroying')) {
       return;
     }
 
-    const _tooltip = this.get('_tooltip');
-
     _tooltip.popperInstance.popper.classList.remove(ANIMATION_CLASS);
 
     run.later(() => {
@@ -477,6 +478,7 @@ export default Component.extend({
 
       _tooltip.hide();
 
+      this.set('_isHiding', false);
       this.set('isShown', false);
       this.sendAction('onHide', this);
     }, this.get('_animationDuration'));
diff --git a/addon/styles/_mixins.scss b/addon/styles/_mixins.scss
index 7f1875df..65f901d8 100644
--- a/addon/styles/_mixins.scss
+++ b/addon/styles/_mixins.scss
@@ -7,24 +7,21 @@
   }
 
   &[x-placement^="#{$side}"] {
-    // margin-#{$opposite}: 0;
-
-    // &.ember-tooltip-effect-slide {
-    //   margin-#{$side}: $tooltipSlideDistance;
-    // }
-
-    // &.ember-tooltip-effect-slide.ember-tooltip-show {
-    //   margin-#{$opposite}: 0;
-    // }
-
     .ember-tooltip-arrow {
       border-#{$opposite}-width: 0;
-      border-#{$side}-color: $tooltipBackgroundColor; /* TODO - make work for popovers */
       #{$opposite}: -$_tooltipArrowSize;
       #{$from}: calc(50% - $_tooltipArrowSize); // If vert, left, else top
       margin-#{$side}: 0;
       margin-#{$opposite}: 0;
     }
+
+    &.ember-tooltip .ember-tooltip-arrow {
+      border-#{$side}-color: $tooltipBackgroundColor;
+    }
+
+    &.ember-popover .ember-tooltip-arrow {
+      border-#{$side}-color: $popoverBackgroundColor;
+    }
   }
 }
 
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 73c8e871..6772bd43 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -1,5 +1,5 @@
 $tooltipBackgroundColor: #3a3c47;
-$tooltipTransitionDuration: 200ms;
+$popoverBackgroundColor: #fff;
 $tooltipSlideDistance: 10px;
 
 $_tooltipArrowSize: 5px; /* If you change this, position breaks */
@@ -40,7 +40,7 @@ $_tooltipArrowSize: 5px; /* If you change this, position breaks */
 
 .ember-popover {
   color: #000;
-  background-color: #fff;
+  background-color: $popoverBackgroundColor;
   padding: 10px 20px;
   border: 1px solid #ccc;
 
@@ -73,10 +73,9 @@ $_tooltipArrowSize: 5px; /* If you change this, position breaks */
 .ember-tooltip,
 .ember-popover {
   opacity: 0;
-  -webkit-transition: opacity #{$tooltipTransitionDuration} ease-out,
-                      margin #{$tooltipTransitionDuration} ease-out;
-  transition: opacity #{$tooltipTransitionDuration} ease-out,
-              margin #{$tooltipTransitionDuration} ease-out;
+  -webkit-transition: opacity ease-out, margin ease-out;
+  transition: opacity ease-out, margin ease-out;
+  transition-duration: 200ms;
 
   &.ember-tooltip-effect-none,
   &.ember-tooltip-show {
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 50d1786b..627bfff6 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -10,7 +10,6 @@ html {
 
 body {
   font-size: #{$bodyFontSize}rem;
-  background-color: #eee; /* TODO - remove */
 
   /* So text looks much better in Crome/Safari */
 
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index 3982b5f3..272fb30c 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -148,6 +148,10 @@
     background-color: #e37f7f;
     color: #fff;
   }
+
+  .tooltip-error .ember-tooltip-arrow {
+    display: none;
+  }
 </style>
 
 {{#some-component}}
diff --git a/tests/integration/components/tooltip-is-visible-test.js b/tests/integration/components/is-shown-test.js
similarity index 100%
rename from tests/integration/components/tooltip-is-visible-test.js
rename to tests/integration/components/is-shown-test.js