From 8283ba94feb93e8299df698d917aec3be80b52b7 Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com>
Date: Mon, 18 Aug 2025 16:12:00 +0100
Subject: [PATCH] AutoGridItemRenderer: Hide repeats when dragging to fix
 select bug (#109798)

hide repeated panels when dragging
---
 .../layout-auto-grid/AutoGridItemRenderer.tsx | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx
index 26ed6e5da9c..91882937ee2 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx
@@ -30,11 +30,13 @@ export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem
           addDndContainer,
           isDragged,
           isDragging,
+          isRepeat = false,
         }: {
           item: VizPanel;
           addDndContainer: boolean;
           isDragged: boolean;
           isDragging: boolean;
+          isRepeat?: boolean;
         }) => (
           <div
             {...(addDndContainer
@@ -45,13 +47,25 @@ export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem
             {isLazy ? (
               <LazyLoader
                 key={item.state.key!}
-                className={cx(conditionalRenderingClass, styles.wrapper, isDragged && styles.draggedWrapper)}
+                className={cx(
+                  conditionalRenderingClass,
+                  styles.wrapper,
+                  isDragged && !isRepeat && styles.draggedWrapper,
+                  isDragged && isRepeat && styles.draggedRepeatWrapper
+                )}
               >
                 <item.Component model={item} />
                 {conditionalRenderingOverlay}
               </LazyLoader>
             ) : (
-              <div className={cx(conditionalRenderingClass, styles.wrapper, isDragged && styles.draggedWrapper)}>
+              <div
+                className={cx(
+                  conditionalRenderingClass,
+                  styles.wrapper,
+                  isDragged && !isRepeat && styles.draggedWrapper,
+                  isDragged && isRepeat && styles.draggedRepeatWrapper
+                )}
+              >
                 <item.Component model={item} />
                 {conditionalRenderingOverlay}
               </div>
@@ -79,6 +93,7 @@ export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem
           key={item.state.key!}
           isDragged={isDragged}
           isDragging={isDragging}
+          isRepeat={true}
         />
       ))}
     </>
@@ -96,6 +111,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     height: `var(${DRAGGED_ITEM_HEIGHT})`,
     opacity: 0.8,
   }),
+  draggedRepeatWrapper: css({
+    visibility: 'hidden',
+  }),
   draggedPlaceholder: css({
     width: '100%',
     height: '100%',