diff --git a/ui/packages/consul-ui/app/modifiers/on-outside.js b/ui/packages/consul-ui/app/modifiers/on-outside.js
index 56095b385e..a1789f76f6 100644
--- a/ui/packages/consul-ui/app/modifiers/on-outside.js
+++ b/ui/packages/consul-ui/app/modifiers/on-outside.js
@@ -6,18 +6,34 @@
 import Modifier from 'ember-modifier';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { registerDestructor } from '@ember/destroyable';
+
+function cleanup(instance) {
+  if (instance) {
+    instance.doc?.removeEventListener('click', instance.listen);
+  }
+}
 
 export default class OnOutsideModifier extends Modifier {
   @service('dom') dom;
 
-  constructor() {
-    super(...arguments);
+  constructor(owner, args) {
+    super(owner, args);
     this.doc = this.dom.document();
+
+    registerDestructor(this, cleanup);
   }
-  async connect(params, options) {
+
+  async modify(element, positional, named) {
+    cleanup.call(this);
+
+    this.params = positional;
+    this.options = named;
+    this.element = element;
+
     await new Promise((resolve) => setTimeout(resolve, 0));
     try {
-      this.doc.addEventListener(params[0], this.listen);
+      this.doc.addEventListener(positional[0], this.listen);
     } catch (e) {
       // continue
     }
@@ -25,26 +41,10 @@ export default class OnOutsideModifier extends Modifier {
 
   @action
   listen(e) {
-    if (this.dom.isOutside(this.element, e.target)) {
+    debugger;
+    if (this.element && this.dom.isOutside(this.element, e.target)) {
       const dispatch = typeof this.params[1] === 'function' ? this.params[1] : (_) => {};
       dispatch.apply(this.element, [e]);
     }
   }
-
-  disconnect() {
-    this.doc.removeEventListener('click', this.listen);
-  }
-
-  didReceiveArguments() {
-    this.params = this.args.positional;
-    this.options = this.args.named;
-  }
-
-  didInstall() {
-    this.connect(this.args.positional, this.args.named);
-  }
-
-  willRemove() {
-    this.disconnect();
-  }
 }