From 9582558b2985e911ffeda769d3d1f1840a1751e4 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Sun, 20 Aug 2023 22:03:28 +0200
Subject: [PATCH] chore: Prevent multiple portals from being created #2025

---
 ui/src/copyable_text.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
index 7674fcd0a1..ec45b189cb 100644
--- a/ui/src/copyable_text.tsx
+++ b/ui/src/copyable_text.tsx
@@ -79,6 +79,7 @@ export const ClipboardCopyButton = ({ value, anchorElement, showOnHoverOnly = fa
   const
     timeoutRef = React.useRef<U>(),
     [copied, setCopied] = React.useState(false),
+    btnContainerRef = React.useRef<HTMLDivElement>(document.createElement('div')),
     onClick = React.useCallback(async () => {
       if (!anchorElement) return
       try {
@@ -105,10 +106,9 @@ export const ClipboardCopyButton = ({ value, anchorElement, showOnHoverOnly = fa
   React.useEffect(() => {
     if (!anchorElement) return
     if (portal) {
-      // TODO: Prevent multiple portals from being created, e.g. when showOnHoverOnly prop changes.
       ReactDOM.render(
         ReactDOM.createPortal(CopyButton, anchorElement),
-        document.createElement('div')
+        btnContainerRef.current
       )
     }
     if (showOnHoverOnly) anchorElement.classList.add(css.hover)