From c1ff508b6eb15bdba0d30f1c1767abf3bcd5f502 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:47:52 +0100
Subject: [PATCH] [v11.0.x] Canvas: Fix styles applying glitch on element type
 changing (#86365)

Canvas: Fix styles applying glitch on element type changing (#85184)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
(cherry picked from commit 20eac8d264d3a6605ddc256e0b68fd1009962c21)

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
---
 .betterer.results                              |  9 +++------
 public/app/features/canvas/runtime/element.tsx | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index cc20dfbb76d..8fa9874bf84 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2337,13 +2337,10 @@ exports[`better eslint`] = {
     "public/app/features/canvas/runtime/element.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Do not use any type assertions.", "7"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "8"]
+      [0, 0, 0, "Do not use any type assertions.", "4"],
+      [0, 0, 0, "Do not use any type assertions.", "5"]
     ],
     "public/app/features/canvas/runtime/frame.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 91f0fed919b..3e92b3efae7 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -189,18 +189,31 @@ export class ElementState implements LayerElement {
     style.transform = `translate(${translate[0]}, ${translate[1]})`;
     this.options.placement = placement;
     this.sizeStyle = style;
+
     if (this.div) {
       for (const key in this.sizeStyle) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.div.style[key as any] = (this.sizeStyle as any)[key];
       }
 
-      const elementType = this.options.type;
-      // SVG elements have their own styles
       // TODO: This is a hack, we should have a better way to handle this
+      const elementType = this.options.type;
       if (!SVGElements.has(elementType)) {
+        // apply styles to div if it's not an SVG element
         for (const key in this.dataStyle) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           this.div.style[key as any] = (this.dataStyle as any)[key];
         }
+      } else {
+        // ELEMENT IS SVG
+        // clean data styles from div if it's an SVG element; SVG elements have their own data styles;
+        // this is necessary for changing type of element cases;
+        // wrapper div element (this.div) doesn't re-render (has static `key` property),
+        // so we have to clean styles manually;
+        for (const key in this.dataStyle) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          this.div.style[key as any] = '';
+        }
       }
     }
   }