diff --git a/ui/packages/consul-ui/app/modifiers/aria-menu.js b/ui/packages/consul-ui/app/modifiers/aria-menu.js
index cc9f0dec6a..86188845cd 100644
--- a/ui/packages/consul-ui/app/modifiers/aria-menu.js
+++ b/ui/packages/consul-ui/app/modifiers/aria-menu.js
@@ -6,6 +6,7 @@
 import Modifier from 'ember-modifier';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
 
 const TAB = 9;
 const ESC = 27;
@@ -38,6 +39,12 @@ const keys = {
 
 const MENU_ITEMS = '[role^="menuitem"]';
 
+function cleanup(instance) {
+  if (instance) {
+    instance?.doc?.removeEventListener('keydown', instance?.keydown);
+  }
+}
+
 export default class AriaMenuModifier extends Modifier {
   @service('-document') doc;
   orientation = 'vertical';
@@ -85,28 +92,19 @@ export default class AriaMenuModifier extends Modifier {
     }
   }
 
-  connect(params, named) {
-    this.$trigger = this.doc.getElementById(this.element.getAttribute('aria-labelledby'));
-    if (typeof named.openEvent !== 'undefined') {
-      this.focus(named.openEvent);
-    }
-    this.doc.addEventListener('keydown', this.keydown);
-  }
-
-  disconnect() {
-    this.doc.removeEventListener('keydown', this.keydown);
-  }
-
-  didReceiveArguments() {
-    this.params = this.args.positional;
-    this.options = this.args.named;
-  }
+  modify(element, positional, named) {
+    this.params = positional;
+    this.options = named;
 
-  didInstall() {
-    this.connect(this.args.positional, this.args.named);
-  }
+    if (!this.$trigger) {
+      this.element = element;
+      this.$trigger = this.doc.getElementById(element.getAttribute('aria-labelledby'));
+      if (typeof named.openEvent !== 'undefined') {
+        this.focus(named.openEvent);
+      }
 
-  willRemove() {
-    this.disconnect();
+      this.doc.addEventListener('keydown', this.keydown);
+    }
+    registerDestructor(this, cleanup);
   }
 }