AutoGridItemRenderer: Hide repeats when dragging to fix select bug (#109798)

hide repeated panels when dragging

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%',