diff --git a/ui/packages/consul-ui/app/modifiers/with-copyable.js b/ui/packages/consul-ui/app/modifiers/with-copyable.js
index ce13aee921..a8fd2d34c5 100644
--- a/ui/packages/consul-ui/app/modifiers/with-copyable.js
+++ b/ui/packages/consul-ui/app/modifiers/with-copyable.js
@@ -13,7 +13,7 @@ const typeAssertion = (type, value, withDefault) => {
 };
 
 function cleanup(instance) {
-  if (instance?.source && instance?.hash) {
+  if (instance && instance?.source && instance?.hash) {
     instance.source?.off('success', instance.hash.success)?.off('error', instance.hash.error);
 
     instance.source?.destroy();
@@ -50,11 +50,15 @@ export default class WithCopyableModifier extends Modifier {
     this.hash = hash;
   }
 
+  constructor() {
+    super(...arguments);
+    registerDestructor(this, cleanup);
+  }
+
   modify(element, [value], namedArgs) {
     this.element = element;
     this.disconnect();
     this.connect(value, namedArgs);
-    registerDestructor(this, cleanup);
   }
 
   disconnect() {