From 5e4722fe2ec7f9cc5bd9e683aeeb688204b978f4 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 3 May 2024 17:47:30 -0600
Subject: [PATCH] Canvas: Fix canvas style regression (#87363)

---
 .betterer.results                              |  7 ++++++-
 public/app/features/canvas/runtime/element.tsx | 13 ++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 07e45f7b8d7..26c4772289c 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2195,7 +2195,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "3"]
     ],
     "public/app/features/canvas/runtime/element.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [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 c79fc3d67b3..176516e5489 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -191,16 +191,18 @@ export class ElementState implements LayerElement {
     this.sizeStyle = style;
 
     if (this.div) {
-      for (const [key, value] of Object.entries(this.sizeStyle)) {
-        this.div.style.setProperty(key, value);
+      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];
       }
 
       // 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, value] of Object.entries(this.dataStyle)) {
-          this.div.style.setProperty(key, value);
+        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
@@ -209,7 +211,8 @@ export class ElementState implements LayerElement {
         // 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) {
-          this.div.style.removeProperty(key);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          this.div.style[key as any] = '';
         }
       }
     }