From 6588218cca39bc0ddab52a8c4933a71adfe37115 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 18 May 2020 17:21:10 +0100
Subject: [PATCH] ui: Misc amends for Safari and Firefox (#7907)

1. Ensure dropdown menus function correctly in Safari
2. Ensure default grey color for buttons is not used
3. Ensure IntersectionObservers are cleaned up properly in Safari
---
 ui-v2/app/components/toggle-button/index.js      |  5 +++++
 ui-v2/app/mixins/with-filtering.js               |  2 ++
 ui-v2/app/services/dom.js                        | 16 ++++++++++++++--
 .../app/styles/base/components/buttons/skin.scss |  1 +
 .../base/components/popover-menu/skin.scss       | 13 +++++++------
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/ui-v2/app/components/toggle-button/index.js b/ui-v2/app/components/toggle-button/index.js
index ff05fd1c19..11f0a7efc7 100644
--- a/ui-v2/app/components/toggle-button/index.js
+++ b/ui-v2/app/components/toggle-button/index.js
@@ -43,6 +43,11 @@ export default Component.extend({
   },
   actions: {
     click: function(e) {
+      // only preventDefault if the target isn't an external link
+      // TODO: this should be changed for an explicit close
+      if ((e.target.rel || '').indexOf('noopener') === -1) {
+        e.preventDefault();
+      }
       this.input.checked = !this.input.checked;
       // manually dispatched mouse events have a detail = 0
       // real mouse events have the number of click counts
diff --git a/ui-v2/app/mixins/with-filtering.js b/ui-v2/app/mixins/with-filtering.js
index ab431423c4..b771101836 100644
--- a/ui-v2/app/mixins/with-filtering.js
+++ b/ui-v2/app/mixins/with-filtering.js
@@ -6,6 +6,8 @@ const toKeyValue = function(el) {
   let value = '';
   switch (el.type) {
     case 'radio':
+      value = el.value === 'on' ? '' : el.value;
+      break;
     case 'search':
     case 'text':
       value = el.value;
diff --git a/ui-v2/app/services/dom.js b/ui-v2/app/services/dom.js
index 0a023c7672..183c82f9fb 100644
--- a/ui-v2/app/services/dom.js
+++ b/ui-v2/app/services/dom.js
@@ -31,6 +31,11 @@ export default Service.extend({
     inViewportCallbacks = new WeakMap();
     $_ = getComponentFactory(getOwner(this));
   },
+  willDestroy: function() {
+    this._super(...arguments);
+    inViewportCallbacks = null;
+    $_ = null;
+  },
   document: function() {
     return this.doc;
   },
@@ -93,7 +98,7 @@ export default Service.extend({
   },
   isInViewport: function($el, cb, threshold = 0) {
     inViewportCallbacks.set($el, cb);
-    const observer = new IntersectionObserver(
+    let observer = new IntersectionObserver(
       (entries, observer) => {
         entries.map(item => {
           const cb = inViewportCallbacks.get(item.target);
@@ -109,6 +114,13 @@ export default Service.extend({
     );
     observer.observe($el); // eslint-disable-line ember/no-observers
     // observer.unobserve($el);
-    return () => observer.disconnect(); // eslint-disable-line ember/no-observers
+    return () => {
+      observer.unobserve($el); // eslint-disable-line ember/no-observers
+      if (inViewportCallbacks) {
+        inViewportCallbacks.delete($el);
+      }
+      observer.disconnect(); // eslint-disable-line ember/no-observers
+      observer = null;
+    };
   },
 });
diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss
index 3c142a34ab..64f3b5eb76 100644
--- a/ui-v2/app/styles/base/components/buttons/skin.scss
+++ b/ui-v2/app/styles/base/components/buttons/skin.scss
@@ -94,6 +94,7 @@
 
 %internal-button {
   color: $gray-900;
+  background-color: $white;
 }
 %internal-button-dangerous {
   @extend %frame-red-300;
diff --git a/ui-v2/app/styles/base/components/popover-menu/skin.scss b/ui-v2/app/styles/base/components/popover-menu/skin.scss
index 15fffe38bb..7bec6b1400 100644
--- a/ui-v2/app/styles/base/components/popover-menu/skin.scss
+++ b/ui-v2/app/styles/base/components/popover-menu/skin.scss
@@ -1,3 +1,9 @@
+%popover-menu + label > *::after {
+  @extend %with-chevron-down-icon, %as-pseudo;
+  width: 16px;
+  height: 16px;
+  margin-left: 16px;
+}
 %more-popover-menu + label > *::after {
   @extend %with-more-horizontal-icon, %as-pseudo;
   opacity: 0.7;
@@ -6,12 +12,7 @@
 }
 %more-popover-menu + label > * {
   font-size: 0;
-}
-%popover-menu + label > *::after {
-  @extend %with-chevron-down-icon, %as-pseudo;
-  width: 16px;
-  height: 16px;
-  margin-left: 16px;
+  background-color: $transparent;
 }
 %popover-menu + label > * {
   @extend %split-button, %sort-button;